1

我只想切换在单击操作上滑动的 div 中的“.plus”和“.minus”元素。

HTML

<div class="notification-box-heading">
    This is an Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span>
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span>
</div>

<div class="notification-box-body"> 
    <strong>This is an alert!</strong>
    <p>This is the alert subtext.</p>
</div>

<div class="notification-box-heading">
    This is another Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span>
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span>
</div>

<div class="notification-box-body"> 
    <strong>This is an alert!</strong>
    <p>This is the alert subtext.</p>
</div>

JS

$(document).ready(function () {
    //hide the all of the element with class notification-box-body
    $(".notification-box-body").hide();
    //hide the all of the element with class minus
    $(".minus").hide();
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function () {
        $(this).next("div.notification-box-body").slideToggle(300);
        $(".minus").toggle();
        $(".plus").toggle();
    });
});

http://jsfiddle.net/tqD6S/2/

有任何想法吗？

4

3 回答 3

2 
    $(".minus", this).toggle();
    $(".plus", this).toggle();

第二个参数定义范围。

于 2013-03-13T20:21:54.000 回答
1

被切换的.notification-box-body元素不是包含and元素的元素。相反，容器元素实际上是被单击的元素，..minus.plus.notification-box-heading

尝试：

$(".notification-box-heading").click(function () {
    $(this).next("div.notification-box-body").slideToggle(300);
    $(this).find(".minus,.plus").toggle();
});

参见jsFiddle 演示

于 2013-03-13T20:22:44.397 回答
0 
$(document).ready(function () {
    //hide the all of the element with class notification-box-body
    $(".notification-box-body").hide();
    //hide the all of the element with class minus
    $(".minus").hide();
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function () {
        $(this).next("div.notification-box-body").slideToggle(300);
        $(this).find(".minus").toggle();
        $(this).find(".plus").toggle();
    });
});

jsFiddle

于 2013-03-13T20:22:52.180 回答