1

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

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

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

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

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

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>

用于显示和隐藏的 JQuery

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

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

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

4

2 回答 2

1

你的问题是在.sub1里面.item1，所以当你点击时.sub1你也点击了.item1。

这就是所谓的事件冒泡。要停止这种情况，只需在单击时使用stopPropagation.sub1：

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

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

于 2013-05-09T18:48:08.967 回答
0

实际上是你的 HTML 搞砸了。您有一个<li>产品 1 的吊牌，它延伸到产品 2 之后。这就是为什么您的点击总是在第一位。

http://jsfiddle.net/6wE52/

于 2013-05-09T18:49:43.077 回答