Question

我试图在鼠标点击时显示/隐藏元素，但它必须是单击的元素而不仅仅是类，因为页面上将存在多个类。

继承人我所拥有的;

<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/

Answer 1

您没有包含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();
});

Answer 2

如果你必须坚持你当前的标记，并有很多下拉菜单：

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

Fiddle

Answer 3

您在http://jsfiddle.net/75yek8do/2/

您可以拥有任意数量的项目（.dropMenu）。它将搜索下一次出现的.drop-down元素，并将切换其可见性。

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

jQuery显示if语句

3 个答案: