0

我正在建造一个飞出盒，但遇到了问题。我认为它可以用 if / then 语句来解决，但不知道该怎么做。

我有以下 8 个 div 设置为单击按钮。

<script>
    $( "#btn1" ).click(function() {
        $( "#one" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn2" ).click(function() {
        $( "#two").toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn3" ).click(function() {
        $( "#three" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn4" ).click(function() {
       $( "#four" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn5" ).click(function() {
        $( "#five" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn6" ).click(function() {
       $( "#six" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#btn7" ).click(function() {
        $( "#seven" ).toggle( "slide", "easeInOutExpo", 100);
    });
    $( "#eight" ).click(function() {
       $( "#one" ).toggle( "slide", "easeInOutExpo", 100);
    });

</script>

每个 div 在点击时效果很好。这是我需要它做的事情：

如果任何其他 div 是打开的，我需要它们来切换......所以说我点击 3 然后点击 7，3 应该关闭。

这是html：

<div id="transaction">
    <div id="btn1">btn1 </div>
    <div id="btn2">btn1 </div>
    <div id="btn3">btn1 </div>
    <div id="btn4">btn1 </div>
    <div id="btn5">btn1 </div>
    <div id="btn6">btn1 </div>
    <div id="btn7">btn1 </div>
    <div id="btn8">btn1 </div>
</div>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="four">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="five">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="six">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="seven">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<p id="seven">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus commodo purus sit amet fermentum. Donec libero quam, facilisis non consectetur vel, lacinia eu nibh. Pellentesque eget porttitor purus. Donec non quam nulla, luctus tempor urna. Duis commodo cursus justo eget pellentesque. Aliquam a aliquam odio. Donec tristique lorem vitae dolor.</p>
<script>
$( "#btn1" ).click(function() {
$( "#one" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn2" ).click(function() {
$( "#two").toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn3" ).click(function() {
$( "#three" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn4" ).click(function() {
$( "#four" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn5" ).click(function() {
$( "#five" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn6" ).click(function() {
$( "#six" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#btn7" ).click(function() {
$( "#seven" ).toggle( "slide", "easeInOutExpo", 100);
});
$( "#eight" ).click(function() {
$( "#one" ).toggle( "slide", "easeInOutExpo", 100);
});

</script>
4

2 回答 2

1

这就是类和.siblings()方法存在的原因。

要使用另一个按钮，我更喜欢使用.data()和data-属性的魔力。在按钮的 HTML 中添加类似这样的内容：

<div class="btn" id="btn1" data-para="one">

和段落：

<p class="para" id="one">Lorem ipsum...</p>

您可以改用这个 jQuery：

$('.btn').on('click',function(e) {
    var id = $(this).data('para');
    $('#'+id).toggle( "slide", "easeInOutExpo", 100).siblings('.para').hide();
});
于 2013-03-27T16:23:22.640 回答
0

这似乎是事件委托的主要候选人：http ://learn.jquery.com/events/event-delegation/

本质上，这个想法是你可以检测到哪个元素被点击了，而不是使用一堆.on("click")事件。这极大地节省了性能。

这是一个小提琴：http: //jsfiddle.net/jD78j/2/

这是使用的代码：

$(document).on("click","button", function(e) {

    var buttonId = $(e.target).attr("id");
    var nextDiv = $("#" + buttonId).next();

    $("div").slideUp("fast");

    if(nextDiv.is(":visible")) {
        return false;
    } else {
        nextDiv.slideToggle("fast");
    }

});

这为您提供了额外的好处，即实际上知道用户在对象中单击了哪个按钮，该event对象具有许多不同的属性可供使用。

于 2013-03-27T16:17:07.243 回答