-2

当我点击一个我已经放入其中的 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。

4

2 回答 2

0

你可以像上面提到的 Ed 那样做。或者更好地组织你的代码，然后使用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>

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

$('.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 中的文本。

于 2013-11-13T16:41:25.683 回答
0

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

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

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

您需要给他们不同的 id 并改用 ID 选择器。

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

或者将您的第二个 sub-item-menu div 更改为具有在您的 css 中提到但在您的标记中没有提到的类 sub-item-menu2。

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

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

将响应点击这两个元素。

于 2013-11-13T16:34:06.240 回答