幻燈片切換列表項，但不應該切換時的子項

當我點擊第一個列表項應該顯示什麼該列表中的選項item 然後如果用戶點擊任何選項，滑動切換不能切換

這就是我的問題：<。切換使得當我點擊列表項

內的項目任何形式的幫助將是巨大的，謝謝：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*/

來源

2014-09-11 Gilbert

裝上單擊事件到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

來源

2014-09-11 13:18:07

非常感謝你<3 – Gilbert 2014-09-11 13:20:08

我能想到的最簡單的

解決方案：撥動聽者加入label而不是li

HTML李：

<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); 
    }); 
});

來源

2014-09-11 13:17:49

這也工作：D謝謝 – Gilbert 2014-09-11 13:30:57

幻燈片切換列表項，但不應該切換時的子項

回答

相關問題