jQuery顯示if語句

我試圖在鼠標單擊時顯示/隱藏一個元素，但它必須是單擊的元素不僅僅是類，因爲頁面上會存在多個類。jQuery顯示if語句

繼承人我得到了什麼;

<i class="fa fa-bars dropMenu">here</i> 

<nav class="drop-down"> 
    <ul> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Buy Now</a><span>5</span></li> 
    </ul> 
</nav>

的JavaScript

$(".dropMenu").click(function(){ 
    if ($(".drop-down",this).is(':visible')) { 
     $(".drop-down",this).hide(); 
    } else if ($(".drop-down",this).is(':hidden')) { 
     $(".drop-down",this).show(); 
    } 
});

的jsfiddle - http://jsfiddle.net/75yek8do/

來源

2014-10-09 Sam

http://jsfiddle.net/75yek8do/8/ – 2014-10-09 14:44:53

如果你必須堅持你當前的標記，並有許多的下拉列表：

$(".dropMenu").on('click', function(){ 
    $(this).next('.drop-down').toggle(); 
});

Fiddle

來源

2014-10-09 14:39:19

所以你的是它的工作原理上的小提琴，但不是在我的個人網站的最佳解決方案 - http://xronn.co.uk/menu/任何想法？（調整窗口查看我的班級圖標） – Sam 2014-10-09 14:58:16

您的網站上的標記有所不同，秒讓我改變它 – 2014-10-09 15:02:17

這個標記是可怕的，你不需要所有的容器bootstrap .... – 2014-10-09 15:15:04

您沒有包含jQuery，而您使用的是<i>作爲上下文，但它是內聯元素，並且它內部不能包含任何元素。所以刪除this作爲上下文。

$(".dropMenu").click(function() { 
    if ($(".drop-down").is(':visible')) { 
     $(".drop-down").hide(); 
    } else if ($(".drop-down").is(':hidden')) { 
     $(".drop-down").show(); 
    } 
});

DEMO

但是你可以簡單地toggle它

$(".dropMenu").click(function(){ 
    $('.drop-down').toggle(); 
});

來源

2014-10-09 14:39:35

給你http://jsfiddle.net/75yek8do/2/

你可以有很多，你喜歡的項目點擊（.dropMenu）。它將搜索下一個.drop-down元素，並切換其可見性。

$(".dropMenu").on('click', function() { 
    $(this).next(".drop-down").toggle(); 
});

來源

2014-10-09 14:42:11

jQuery顯示if語句

回答

相關問題