-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

jQuery セレクターは、そのクラスのすべての要素を選択します。したがって、この：

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

そのクラスで両方の要素を下にスライドします。

それらに異なる ID を与え、代わりに ID セレクターを使用する必要があります。

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

または、2 番目の sub-item-menu div を変更して、css では言及されているがマークアップでは言及されていない class sub-item-menu2 を持つようにします。

また、同様の方法でプラス リンクとマイナス リンクを区別する必要もあります。

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

これらの要素の両方をクリックすると応答します。

于 2013-11-13T16:34:06.240 に答える