slideToggle以前显示的项目没有next（）

Question

On this site我想在各种元素上执行slideToggle，并首先隐藏下一个可见的切换元素。 （所以只有一个一次显示）我可以使用以下代码执行此操作：

$(document).ready(function() {

  $( ".toggle" ).click(function() {

        if ($(this).next().is(":visible"))
            $(this).next().slideToggle("slow");
        else {
            $(".toggle").each(function() {
                if ($(this).next().is(":visible"))
                    $(this).next().slideToggle("slow");
            });
            var tog = $(this).attr("data-class");
            $("."+tog).slideToggle("slow");
        }
    });
});

.rolunk .lead {
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  margin-top: 15px; }

.rolunk h6 {
  cursor: pointer;
  margin: 0;
  padding: 0;
  margin: 0; }

.rolunk h6:hover {
  color: #FF2D0D; }

.rolunk a:hover {
  color: #FF2D0D; }

.box {
  background-color: #F9F9F9;
  border: 1px solid #DEDEDE;
  display: none;
  padding: 15px;
  margin-bottom: 15px; }
  .box a {
    display: inline-block;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 10px; }
  .box a:hover {
    color: #FF2D0D; }
  .box a:last-child {
    margin-bottom: 0px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- !!! Szolgáltatásaink !!! -->
    <div class="clear container-full rolunk">
        <div class="col-12 text-center">
          <h6 class="text-center toggle" data-class="slide1">Dokumentum- pályázati- és kisfilmek</h6>
          <div id="doku_box" class="clear col-12 box slide1">
            <a href="https://www.youtube.com/watch?v=9VefT2-liws">Két utca - Egy motoros korlátai</a><br />
            <a href="https://www.youtube.com/watch?v=TRIXVS63AMI">Üsd még Bözse!</a><br />
            <a href="https://www.youtube.com/watch?v=GXWt9hrvnJA">Pelusfilm - Nyakig ülünk benne</a><br />
            <a href="https://www.youtube.com/watch?v=cpMIp0bDp6g">Nekem is lesz gyerekem</a>
          </div>

          <h6 class="text-center toggle" data-class="slide2">Reklámfilmek</h6>
          <div id="reklam_box" class="clear col-12 box slide2">
          <a href=" https://www.youtube.com/watch?v=l6u4H_V01YA">Riporter- és operatőrképzés Debrecenben</a>
          </div>

          <h6 class="text-center toggle" data-class="slide3">Webvideók</h6>
          <div id="webvid_box" class="clear col-12 box slide3">
            <a href="https://www.youtube.com/c/ginappi">Ginappi videók</a>
          </div>

          <h6 class="text-center toggle" data-class="slide4">Esküvői videók</h6>
          <div id="esku_box" class="clear col-12 box slide4">
            <a href="https://www.youtube.com/watch?v=LE-qYhaN2e8">Fogd meg a kezem, ez egy szép nap gyere velem</a>
          </div>

       <h6 class="text-center toggle" data-class="slide5">Pocakfilm</h6>
          <div id="pocak_box" class="clear col-12 box slide5">
            <p>123</p>
            <a href="http://pocakfilm.com" target="_blank">pocakfilm.com</a>
            </div>

          <h6 class="text-center toggle" data-class="slide6">Egyedi elképzelések</h6>
          <div id="egyedi_box" class="clear col-12 box slide6">
            <p>A1234</p>
          </div>

        </div>
      </div>
    </div>

我想再次使用旋转木马这样做，但我无法弄清楚如何隐藏不在$（this）旁边的先前切换的div，这里是我想要做同样的事情：< / p>

    $( ".toggle2" ).click(function() {

      //Slide up if open
        if ($("."+tog).is(":visible"))
            $("."+tog).slideToggle("slow");
      //Slide up every visible
        else {
            $(".toggle2").each(function() {
                if ($("."+tog).next().is(":visible"))
                    $("."+tog).next().slideToggle("slow");
            });
      // slide Down
            var tog = $(this).attr("data-class");
            $("."+tog).slideToggle("slow");
        }
    });

.reszlet {
  display: none;
  background: #F9F9F9;
  border: 1px solid #D5D5D5;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.18);
  padding: 15px 15px 10px 15px;
  margin-bottom: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">

          <div class="carousel-item item1">
            <div class="overlay">
              <h3>Ginappi youtube videók</h3>
              <button class="btn-light toggle2" data-class="munka1" type="button" >
                Részletek
              </button>
            </div>
          </div>

          <div class="carousel-item item2">
            <div class="overlay">
              <h3>Just nature</h3>
              <button class="btn-light toggle2" data-class="munka2" type="button" >
                Részletek
              </button>
            </div>
          </div>

          <div class="carousel-item item3">
            <div class="overlay">
              <h3>Nekem is lesz gyerekem!</h3>
              <button class="btn-light toggle2" data-class="munka3" type="button" >
                Részletek
              </button>
            </div>
          </div>

           <div class="carousel-item item4">
            <div class="overlay">
              <h3>Pelusfilm - Nyakig ülünk benne</h3>
              <button class="btn-light toggle2" data-class="munka4" type="button" >
                Részletek
              </button>
            </div>
          </div>


        </div>

        <div id="videos">
          <div id="ginappi" class="munka1 yt reszlet col-12" >
              <iframe width="100%" src="https://www.youtube.com/embed/kRoGnxw-tFI" frameborder="0" allowfullscreen></iframe>
          </div>

           <div id="nature" class="munka2 yt reszlet col-12"  >
            <iframe width="100%"  src="https://www.youtube.com/embed/nPu-v2kaG9g" frameborder="0" allowfullscreen></iframe>
          </div>

           <div id="gyerek" class="text-center yt munka3 reszlet col-12"  >
           <iframe width="100%"  src="https://www.youtube.com/embed/cpMIp0bDp6g" frameborder="0" allowfullscreen></iframe>
          </div>

          <div id="pelus" class="text-center yt munka4 reszlet col-12">
          <iframe width="100%"  src="https://www.youtube.com/embed/GXWt9hrvnJA" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>

如您所见，它不会隐藏之前显示的项目。

Answer 1

您可以在＆＃34; actual / open＆＃34;中添加某种标识符。 div，在这种情况下我使用了一个类名。

＆＃13;

＆＃13;

$(".toggle2").click(function() {
    var tog = $(this).attr("data-class");
    
    //Hide the actual/open element and remove the identifier
    $('.open').slideUp("slow").removeClass('open');
  
    //Open the new element and assign the identifier
    $("." + tog).slideToggle("slow").addClass('open');
});

＆＃13;

.reszlet {
  display: none;
  background: #F9F9F9;
  border: 1px solid #D5D5D5;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.18);
  padding: 15px 15px 10px 15px;
  margin-bottom: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">

  <div class="carousel-item item1">
    <div class="overlay">
      <h3>Ginappi youtube videók</h3>
      <button class="btn-light toggle2" data-class="munka1" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item2">
    <div class="overlay">
      <h3>Just nature</h3>
      <button class="btn-light toggle2" data-class="munka2" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item3">
    <div class="overlay">
      <h3>Nekem is lesz gyerekem!</h3>
      <button class="btn-light toggle2" data-class="munka3" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item4">
    <div class="overlay">
      <h3>Pelusfilm - Nyakig ülünk benne</h3>
      <button class="btn-light toggle2" data-class="munka4" type="button">
        Részletek
      </button>
    </div>
  </div>


</div>

<div id="videos">
  <div id="ginappi" class="munka1 yt reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/kRoGnxw-tFI" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="nature" class="munka2 yt reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/nPu-v2kaG9g" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="gyerek" class="text-center yt munka3 reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/cpMIp0bDp6g" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="pelus" class="text-center yt munka4 reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/GXWt9hrvnJA" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改以添加评论

您可以检查该项目是否具有班级open ...就像这样：

＆＃13;

＆＃13;

$(".toggle2").click(function() {
  var tog = $(this).attr("data-class");

  //Check if it's already open
  if (!$("." + tog).hasClass('open')) {
      //Hide the actual/open element and remove the identifier
      $('.open').slideUp("slow").removeClass('open');
      //Open the new element and assign the identifier
      $("." + tog).slideToggle("slow").addClass('open');
  }
});

＆＃13;

.reszlet {
  display: none;
  background: #F9F9F9;
  border: 1px solid #D5D5D5;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.18);
  padding: 15px 15px 10px 15px;
  margin-bottom: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">

  <div class="carousel-item item1">
    <div class="overlay">
      <h3>Ginappi youtube videók</h3>
      <button class="btn-light toggle2" data-class="munka1" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item2">
    <div class="overlay">
      <h3>Just nature</h3>
      <button class="btn-light toggle2" data-class="munka2" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item3">
    <div class="overlay">
      <h3>Nekem is lesz gyerekem!</h3>
      <button class="btn-light toggle2" data-class="munka3" type="button">
        Részletek
      </button>
    </div>
  </div>

  <div class="carousel-item item4">
    <div class="overlay">
      <h3>Pelusfilm - Nyakig ülünk benne</h3>
      <button class="btn-light toggle2" data-class="munka4" type="button">
        Részletek
      </button>
    </div>
  </div>


</div>

<div id="videos">
  <div id="ginappi" class="munka1 yt reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/kRoGnxw-tFI" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="nature" class="munka2 yt reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/nPu-v2kaG9g" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="gyerek" class="text-center yt munka3 reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/cpMIp0bDp6g" frameborder="0" allowfullscreen></iframe>
  </div>

  <div id="pelus" class="text-center yt munka4 reszlet col-12">
    <iframe width="100%" src="https://www.youtube.com/embed/GXWt9hrvnJA" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;