Question

当我点击我投入的Div Ul时，会显示。请注意代码：

<div class="menu-item">menu title</div>
<div class="plus"></div>
<div class="minus"></div>
<ul class="sub-item-menu">
<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

</ul>
<div class="menu-item">title</div>
<div class="plus"></div>
<div class="minus"></div>
<ul class="sub-item-menu">
<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

</ul>
</div>

jQuery

$('.plus').click(function () {
    $('.sub-item-menu').slideDown();
    $('.plus').fadeOut(200);
    $('.minus').fadeIn(1000);
});

$('.minus').click(function () {
    $('.minus').fadeOut(2);
    $('.sub-item-menu').slideUp();
    $('.plus').fadeIn(1000);
});

Css代码是：

.plus {
    width:22px;
    height:22px;
    background:url(images/plus.png) no-repeat;
    float:left;
    margin-top:-27px;
    margin-left:-5px;
    cursor:pointer;
}
.minus {
    width:22px;
    height:22px;
    background:url(images/minus.png) no-repeat;
    float:left;
    margin-top:-27px;
    margin-left:-5px;
    display:none;
    cursor:pointer;
}
.menu-item {
    background:url(images/menu-asli.png) repeat-x;
    width:197px;
    height:30px;
    margin-top:1px;
    font-family:"B Yekan";
    font-size:16px;
    padding-top:3px;
    padding-right:3px;
    margin-bottom:-2px;
}
.sub-item-menu, .sub-item-menu2 {
    margin-top:3px;
    width:198px;
    margin-right:1px;
    display:none;
    font-family:"B Yekan";
    font-size:14px;
}
.sub-item-menu a:link {
    text-decoration:none;
}
.sub-item-menu li {
    background:#ff0084;
    margin-bottom:1px;
    padding-right:3px;
    color:#FFF;
}

但是当我点击其中一个菜单和子菜单时，子菜单会显示两个节目。

TNX。

Answer 1

您的jQuery选择器将获取该类的所有元素。所以这个：

$('.sub-item-menu').slideDown();

将使用该类向下滑动两个元素。

您需要为他们提供不同的ID并使用ID选择器。

 $('#sub-item-menu1').slideDown();

或者更改你的第二个子项菜单div，使其具有css中提到但不在你的标记中的class子项menu2。

您还需要以类似的方式区分您的加号和减号链接。

$('.minus').click(function () {

将响应对这两个元素的点击。

Answer 2

你可以像上面提到的那样做。或者更好地整理代码，然后使用siblings()函数

将HTML放入有条理的divs并清理li的

<div class="menu-item">menu title
    <div class="plus">+++</div>
    <div class="minus">---</div>
    <ul class="sub-item-menu">
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
    </ul>
</div>
<div class="menu-item">title
    <div class="plus">++</div>
    <div class="minus">--</div>
    <ul class="sub-item-menu">
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
    </ul>
</div>

使用this和siblings()在jQuery中找到所需类的元素

$('.plus').click(function () {
    $(this).siblings('.sub-item-menu').slideDown();
    $(this).fadeOut(200);
    $(this).siblings('.minus').fadeIn(1000);
});

$('.minus').click(function () {
    $(this).fadeOut(2);
    $(this).siblings('.sub-item-menu').slideUp();
    $(this).siblings('.plus').fadeIn(1000);
});

演示：http://jsfiddle.net/nG53w/1/

注意：我确实必须更改你的加号和减号CSS才能使它们正常显示，因为我无法访问背景图像。只需将你的版本放回并删除div中的文字。

当我们点击Div时，如何隐藏或显示UI

2 个答案: