Question

我有以下代码切换正常。我可以单独切换并同时切换所有内容。

当我打开其中一个单独的项目时会出现问题，所以当我选择全部切换时。它会关闭打开的那个并打开一个关闭的......我不想发生这种情况。

我希望所有已打开的商品关闭，同时保持现有的已关闭商品关闭，同时打开，打开所有商品，同时保持所有现有商品的开启。

以下是我的小提琴演示和代码：

的Javascript

function toggle()   {
    $("#showhide").click(function(){
        $("#lorem1").toggle(1000,function(){
            $("#231-minus").toggle();
             $("#231-plus").toggle();
        });

         $("#lorem2").toggle(1000,function(){
            $("#500-minus").toggle();
             $("#500-plus").toggle();
        });
         $("#lorem3").toggle(1000,function(){
            $("#850-minus").toggle();
             $("#850-plus").toggle();
        });
    });


}


$(document).ready(function(){
    toggle();



      $("h3.viol-header1").click(function(){
       $("#lorem1").toggle(1000,function(){
             $("#231-minus").toggle();
             $("#231-plus").toggle();
        });
      });

          $("h3.viol-header2").click(function(){
       $("#lorem2").toggle(1000,function(){
            $("#500-minus").toggle();
             $("#500-plus").toggle();
        });
      });

              $("h3.viol-header3").click(function(){
       $("#lorem3").toggle(1000,function(){
            $("#850-minus").toggle();
             $("#850-plus").toggle();
        });
      });

});

Answer 1

<强> jsBin demo

你的代码中有很多奇怪的东西，我只希望能覆盖它们。让我们开始吧。

HTML align属性已弃用。 使用CSS （text-align属性）
请勿在JS逻辑中使用样式类，例如h3.viol-he... 。有一天，h3可能会在HTML中变为h4，你会发现自己在问为什么jQuery会突然崩溃。
你明白了。而是创建类似jQ-accordion-trigger的类或更具描述性和不可破解的类。

重复性类和代码如h3.viol-header1，h3.viol-header2等......应该避免实际执行类似任务。就像我之前说的那样，使用一个特定的类，除非你完全确定你的JS代码需要它们，否则不要依赖ID。

请勿使用内联样式 style="blah blah"。使用样式表进行样式设置，
除非您喜欢不可读的HTML 。

我将向您展示的一个原则（可能不是我使用jQuery的.next()选择器的最佳原因）是将您的触发器和可滑动DIV设为兄弟元素：

<h3 class="toggleNext">Lorem 1</h4> <div>111....</div> <h3 class="toggleNext">Lorem 2</h4> <div>222....</div> <h3 class="toggleNext">Lorem 3</h4> <div>333...</div>

^{看看HTML现在有多好看？}

默认情况下隐藏了哪些DIV元素？
使用 Adjacent Sibling 选择器+：

.toggleNext + * { /* hides adjacent sibling element */ display: none; }

按钮在哪里？
使用CSS的:after伪：
创建它们
.toggleNext:after{ /* THE +/- SYMBOLS */ font-family: Helvetica, Arial, sans-serif; letter-spacing: 1px; border-radius: 50%; line-height: 19px; font-weight: 400; text-align: center; transition: background .4s; height: 20px; width: 20px; float: right; color: #fff; background: #369335; /* Green (Default) */ content: "+"; } .toggleNext.opened:after{ /* Class toggled by jQuery */ background: #A83C3D; /* Red */ content: "-"; }

我的显示/全部隐藏按钮怎么样？
不要使用ID，可能有一天你会想要两个或更多这样的按钮（见演示）。 使用课程：

<p class="text-right"> <a href="#" class="toggleAll">Show/Hide All </a> </p>

请参阅？我删除了不必要的ID并添加了一个可以在文档中随处使用的类：

/* ::: HELPER CLASSES */ .text-right { text-align: right; }

jQuery （看看现在玩JS逻辑有多么有趣）

var $togglers = $(".toggleNext"); // Cache your toggler elements // ::: SLIDE-TOGGLE BUTTONS (...all it takes) $togglers.click(function( event ){ // event.preventDefault(); // prevent page jumps (if you'll use `a` elements one day) $(this).toggleClass("opened").next().slideToggle(); }); // ::: TOGGLE ALL BUTTONS // (now it's a class, so you can have more than one) // This buttons are a bit specific in logic, think about it, // If user opened all items, would make sense to OPEN-ALL // after a first click? NO. $('.toggleAll').click(function( event ){ event.preventDefault(); // prevent page jumps // The below variable will return `true` if // at least one $trigger element has a class "opened" var isOneOpened = $togglers.hasClass("opened"); if(isOneOpened){ // If one was opened: CLOSE ALL $(".opened").click(); // Perform a click (only .opened togglers) }else{ $togglers.click(); // All are closed: OPEN ALL } });

^{现在您可以直接在+/-符号中单击，因为它是触发元素的一部分（在您的特定情况下为h3）}

<强> Principle2
如果您不想使用兄弟触发器和滑动，那么您可以使用data-*属性来定位DOM树中远离的特定元素。

Jquery切换问题没有关闭所有内容或打开

1 个答案: