Question

我目前正在为一个网站创建一个页面，其中将有一个垂直导航栏，点击所述导航栏上的菜单项/子菜单项后，将隐藏/显示不同的DIV，显示和隐藏不同的产品。

到目前为止，我已经显示/隐藏主菜单项以便在点击它们时使用。

实施例：我点击菜单顶部的“First Item”链接，导航栏旁边会显示First Item图像的网格。然后我点击“第二个菜单项”，第一个图像消失，第二个项目图像出现等。

然而，我遇到麻烦的地方是，出于某种原因，当我点击其中一个子菜单项时，它的图像会显示出来，但我无法让相应的主菜单项的图像消失。

以下是主菜单/子菜单问题的代码：

HTML

<ul class="accordion">
    <li class="item1">
        <a href="#">Product Category 1</a>
        <ul>
            <li class="sub1"><a href="#">Sub 1 </a></li>
        </ul>
    </li>
</ul>

<!---HIDDEN DIVS--->

<div id='hidden_div' >
    <img src="images/item1.png"/>
</div>
<div id='hidden_div2' >
    <img src="images/item1.png"/>
</div>

显示和隐藏的丑闻

$(document).ready(function() 
{
    $('.item1').click(function() 
    {
        $('#hidden_div').show();
        $('#hidden_div2').hide();
    });

    $('.sub1').click(function() 
    {
        $('#hidden_div2').show();
        $('#hidden_div').hide();
    });
});

我不确定导航栏Javascript是否有问题，但连接到此页面的唯一Javascript文件已最小化...说出这个词我可以发布代码。我不知道，我迷路了。

Answer 1

此处的问题是.sub1位于.item1内，因此当您点击.sub1时，您还会点击.item1。

这称为事件冒泡。要停止此操作，只需在.sub1点击上使用stopPropagation，就像那样：

$('.sub1').click(function(e) {
    e.stopPropagation();
    $('#hidden_div2').show();
    $('#hidden_div').hide();
});

如果您不想使用stopPropagation，也可以将选择器更改为$('.item1>a)和$('.sub1>a')。

Answer 2

实际上是你的HTML搞砸了。对于产品1，您有一个悬挂<li>标记，该标记超出了产品2.这就是为什么您的点击总是在第一位运行。

http://jsfiddle.net/6wE52/

使用JQuery遇到多个隐藏/显示DIV的问题

2 个答案: