javascript水平菜單點擊以打開

-2

試圖讓javascript的水平菜單，但不能獲得第二個按鈕來打開自己的項目，（當我點擊第二個按鈕，它打開第一個按鈕的項目）這裏是當前代碼：javascript水平菜單點擊以打開

的JavaScript：

$(document).ready(function() { 
    $(".menu-button,.menu-button1").click(function() { 
    $(".menu-bar").toggleClass("open"); 
    }); 
})

HTML：

<ul class="menu"> 
    <li title="home"><a href="#" class="menu-button home">menu</a></li> 
    <li title="pencil"><a href="#" class="menu-button1 pencil">pencil</a></li> 
    <li title="about"><a href="#" class="active about">about</a></li> 
</ul> 

<ul class="menu-bar"> 
    <li><a href="#" class="menu-button">Menu0</a></li> 
    <li><a href="#">Home2000</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Parent</a></li> 
    <li><a href="#">About</a></li> 
</ul> 

<ul class="menu-bar"> 
    <li><a href="#" class="menu-button1">Menu1</a></li> 
    <li><a href="#">About</a></li> 
</ul>

來源

2015-10-16 Assy

請creare一個jsfiddle.It會很容易明白 – brk

你可以請帖CSS嗎？ – vijayP

在這裏查看演示：https://jsfiddle.net/1pjbnnya/ – Assy

在我開始我的答案之前，讓我解釋一下jQuery。

$(".menu-button,.menu-button1").click(function() { 
    $(".menu-bar").toggleClass("open"); 
});

這個細分：

$(".menu-button,.menu-button1").click(function() { - >當與類菜單按鈕或類菜單按鈕1的任何項目被點擊
$(".menu-bar").toggleClass("open"); - >切換爲所有的「開放」類您的頁面中的元素與類菜單欄。

由於您調用了所有菜單而不是特定的菜單，所以它會打開它們兩個。

因此，通過更具體 - 對於初學者 - 使用的ID，或獨特的/識別的類：

JS：

$(document).ready(function() { 
    $(".menu-button.home").click(function() { 
    $(".menu-bar.home").toggleClass("open"); 
    }); 

    $(".menu-button.pencil").click(function() { 
    $(".menu-bar.pencil").toggleClass("open"); 
    }); 
})

HTML：

<ul class="menu"> 
    <li title="home"><a href="#" class="menu-button home">menu</a></li> 
    <li title="pencil"><a href="#" class="menu-button pencil">pencil</a></li> 
    <li title="about"><a href="#" class="active about">about</a></li> 
</ul> 

<ul class="menu-bar home"> 
    <li><a href="#" class="menu-button">Menu0</a></li> 
    <li><a href="#">Home2000</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Parent</a></li> 
    <li><a href="#">About</a></li> 
</ul> 

<ul class="menu-bar pencil"> 
    <li><a href="#" class="menu-button1">Menu1</a></li> 
    <li><a href="#">About</a></li> 
</ul>

來源

2015-10-16 09:42:37 Roboroads

謝謝你的解釋，現在終於工作了。 – Assy

我同意M.Doye的有關使用。每個（但很抱歉，我不能直接回答）評論。

我想補充一點，這將是更容易使用的那種HTML的結構，我認爲：

<ul class="menu"> 

    <li title="home"> 
    <a href="#" class="menu-button">Show Menu 1</a> 
    <ul class="menu-bar"> 
     <li><a href="#" class="menu-button">Menu1 </a> 
     </li> 
    </ul> 
    </li> 

    <li title="pencil"> 
    <a href="#" class="menu-button">Show Menu 2</a> 
     <ul class="menu-bar"> 
     <li><a href="#" class="menu-button">Menu2 </a> 
     </li> 
    </ul> 
    </li> 

</ul>

的，點擊鏈接和使用的.next（）或.siblings或最接近.. 。顯示正確的ul。但當然，你將不得不重寫你的CSS :)

來源

2015-10-16 09:29:48 KCarnaille

在這裏被更新代碼

$(document).ready(function() { 
    $(".menu-button,.menu-button1").click(function() { 
     $(this).siblings(".menu-bar").toggleClass("open"); 
    }) 
}) 

<ul class="menu"> 
    <li title="home"><a href="#" class="menu-button home">menu</a> 
    <ul class="menu-bar"> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
    </li> 
    <li title="pencil"><a href="#" class="menu-button1 pencil">pencil</a> 
    <ul class="menu-bar"> 
     <li><a href="#">Menu0</a></li> 
     <li><a href="#">Home2000</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Parent</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
    </li> 
</ul>

這裏是一個jsfiddle

來源

2015-10-16 10:21:25

javascript水平菜單點擊以打開

回答

相關問題