子菜单点击事件不工作/解雇 [英] submenu click event not working/firing

问题描述

主菜单的点击代码用于更改类别以及所有但不在子菜单...当点击食物或鞋子等子菜单项时它不会触发警报命令...实际上悬停对于子菜单非常适用但不是有效的

the click code for the main menu works the class changes and all but not on submenu ...it doesn't fire the alert command when submenu item like food or shoes is clicked...in fact hover works perfect for submenu but not the active

HTML

<aside>
    <div class=sidebar>
        <ul class=nav>
            <li class="home active" data-class="page_home">HOME</li>
            <li class="products" data-class="page_products">BYE</li>
            <li class="ART" data-class="page_art">ART</li>
        </ul>
    </div>
</aside>
<article>
    <div class="page_home show">
        <div class="myhome">
             <h1>Home</h1>

            <p>this is the index page</p>
        </div>
    </div>
    <div class="page_products">
        <ul class="productcat">
            <li class="food">FOOD</li>
            <li class="shoes">SHOES</li>
            <li class="cloths">CLOTHS</li>
        </ul>
    </div>
    <div class="page_art">
        <div class="myart">
             <h1>ART</h1>

            <p>this is art page</p>
        </div>
    </div>
</article>

JS

$(".page_products ul.productcat li").on('click', function (e) {
    var $this = $(this),
        // Class of the one to be shown
        subclazz = $this.data("class");
    alert("button clicked");

    $this.addClass('active').siblings().removeClass('active');
}

$("ul.nav li").on('click', function (e) {
    var $this = $(this),
        // Class of the one to be shown
        clazz = $this.data("class");

    $this.addClass('active').siblings().removeClass('active');

    $('article > div').removeClass('show');
    $('.' + clazz).addClass('show');

}); 

CSS

body {
    width:1020px;
    margin:0 auto;
    position:absolute;
}
aside {
    float:left;
    display:block;
    width:20%;
}
article {
    float:right;
    display:block;
    margin-top:0;
    width:75%;
}
.page_home, .page_products, .page_art{
    visibility:hidden;
}
.show {
    visibility: visible;
}
.sidebar {
    margin-left:10px;
}
.nav {
    display:block;
    margin-top:60px;
    list-style-type:none;
}
ul {
    list-style-type:none;
    color:#000;
}
.nav > li {
    background: #666 no-repeat;
    width:150px;
    height:65px;
    color:#000;
}
.nav >li:hover {
    background:#06F no-repeat;
}
.nav > li.active {
    background:#06F no-repeat;
}


.productcat > li {
    background: #666 no-repeat;
    width:150px;
    height:65px;
    color:#fff;   
    display:inline; 
    padding:10px;
}


.productcat>li:hover {
background:#06F no-repeat;

}

.productcat > li.active {
background:#06F no-repeat;
}

推荐答案

尝试使用

$(".page_products ul.productcat li").on('click', function (e) {
    var $this = $(this);
        // Class of the one to be shown
        subclazz = $this.attr("class");
        alert("button clicked");

    $this.addClass('active').siblings().removeClass('active');
}

我改变了

subclazz = $this.data("class");

到

subclazz = $this.attr("class");

和

var $this = $(this),

到

var $this = $(this);

这篇关于子菜单点击事件不工作/解雇的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！