Question

我想做的是......

当我单击第一个列表项时，它应该显示该列表项的选项然后，如果用户单击任何选项，则不能切换幻灯片切换

这是我的问题：＆lt;。当我单击列表项中的项目

时，切换启用

任何形式的帮助都会很棒，谢谢：D

这是我的HTML文件

<div class='div_content_wrapper'>
    <script src="../../script/jquery/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $(".li_submenu_notactive").hide();
        $(".li_menu_notactive").click(function(){
        $(".li_submenu_notactive", this).slideToggle(120);
      });
    });
    </script>

                <div class='div_navigation'>
                    <ul class='ul_navigation_menu'>
                        <li class='li_menu_notactive'><label>Home</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Notifications and Schedules for Today</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_active'><label>Crew Management</label>
                            <ul>
                                <li class='li_submenu_active'><label>Add Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_notactive'><label>User Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Service Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Services / Types</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Services</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Types</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Schedule Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>View / Update Schedules</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Content Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Page Wallpapers</label></li>
                                <li class='li_submenu_notactive'><label>Page Infos</label></li>
                                <li class='li_submenu_notactive'><label>Employee O.T.M</label></li>
                                <li class='li_submenu_notactive'><label>Company Logo</label></li>
                                <li class='li_submenu_notactive'><label>Terms of Services and Conditions</label></li>
                            </ul>                   
                        </li>
                        <li class='li_menu_notactive'><label>Bank Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Add Option/Account</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Option/s</label></li>
                                <li class='li_submenu_notactive'><label>View / Update Account/s</label></li>
                            </ul>
                        </li>
                        <li class='li_menu_notactive'><label>Report Management</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Accounts</label></li>
                                <li class='li_submenu_notactive'><label>Services</label></li>
                                <li class='li_submenu_notactive'><label>Schedules</label></li>
                            </ul>                       
                        </li>
                        <li class='li_menu_notactive'><label>Store Configurations</label>
                            <ul>
                                <li class='li_submenu_notactive'><label>Manage Store Option/s</label></li>
                            </ul>
                        </li>

                    </ul>
                </div>

这是我的CSS文件

body{
    display:inline !important;
    font-family:segoe ui;
    background-color:#111111;
}


/*divs*/
#div_body_wrapper{
    position:absolute;
    top:0px;
    padding:10px;
}

.div_clear{
    clear:both;
}

.div_banner{
    float:left;
    width:1320px;
    min-height:30px;
    background-color:black;
    color:white;
}

.div_body{
    float:left;
    width:1125px;
    min-height:640px;
    background-color:#313131;
    margin-left:5px;
}

.div_footer{
    float:left;
    width:1320px;
    height:30px;
    background-color:black;
    color:white;
    padding:5px;
}

.div_navigation{
    float:left;
    width:180px;
    min-height:30px;
    background-color:#202020;
}

.div_banner, .div_body, .div_navigation{
    padding:5px;
    margin-bottom:5px;
}

.div_content_wrapper{
    display: block;
    overflow:auto;
}
/*divs*/

/*div banner*/
.btn_banner{
    float:right;
    margin-top:30px;
    border:0px;
    padding:5px;
    background-color:#ffb804;
    border-radius:3px;
    font-size:18px;
    margin-left:5px;
    margin-right:5px;
}

.btn_banner:hover{
    background-color:#636363;
    color:white;
    cursor:pointer;
}
/*div banner*/

/*div banner*/
#lbl_banner{
color:white;
font-size:50px;
font-family:Century Gothic;
font-weight:bold;   
text-shadow:
   -2px -2px 0 #000,  
   2px -2px 0 #000,
   -2px 2px 0 #000,
   2px 2px 0 #000;
}
/*div banner*/

/*div navigation*/
.ul_navigation_menu{
    list-style:none;
    padding:0;
}

.ul_navigation_menu li{
    list-style:none;
    margin-top:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:5px;
    font-weight:bold;
    color:white;
    border-style:solid;
    border-color: #3e3e3e;
    border-width:0px;
    border-bottom-width:3px;
}

.ul_navigation_menu li label{
    background-color:#ffb804;
    border-radius:3px;
    color:black;
    padding:5px;
}

.ul_navigation_menu li label{
    cursor:pointer;
}

.ul_navigation_menu li label{
    display:block;
}

.ul_navigation_menu li ul{
    list-style:none;
    padding:0;
}

.ul_navigation_menu li ul li{
    display:block;
    list-style:none;
    background-color:#111111;
    margin-top:5px;
    margin-left:10px;
    padding-left:5px;
    padding-right:5px;
    color:white;
    font-weight:normal !important;
    border-radius:3px;
}

.ul_navigation_menu li ul li label{
    background-color:#111111;
    color:white;
}

.ul_navigation_menu li ul li:hover > label{
    background-color:#4a4a4a;
    cursor:pointer;
}

.li_menu_active ul li {
    display:block !important;
}

.li_submenu_active label{
    background-color:#EB8921 !important;
}
/*div navigation*/

Answer 1

将点击事件附加到label以更明确，并避免传播jsFiddle

$(document).ready(function(){
    $(".li_submenu_notactive").hide();
    $(".li_menu_notactive label").click(function(){
        $(this).next('ul').find(".li_submenu_notactive").slideToggle(120);
    });
});

使用next()横向于以下ul和slideToggle()未激活的孩子li

Answer 2

我能想到的最简单的解决方案：将切换侦听器添加到label而不是li

HTML li：

<li class='li_menu_notactive'><label class="li_menu_label">Home</label>
    <ul>
        <li class='li_submenu_notactive' style="display: none;"><label>Notifications and Schedules for Today</label></li>
    </ul>                   
</li>

JQuery的：

$(document).ready(function(){
    // we have this done in HTML by adding the following to .li_submenu_notactive :
    // style="display: none;"
    // $(".li_submenu_notactive").hide(); 

    $(".li_menu_label").click(function(){
        // let's find a .li_submenu_notactive element under the same parent as the triggering label
        $(this).siblings(".li_submenu_notactive").slideToggle(120);
    });
});

在列表项中滑动切换，但在单击子项时不应切换

2 个答案: