jQuery下一个选择器不工作,语法调整为 accordion

9bfwbjaz  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(154)

我在每个页面上都有一个 accordion ,但只希望打开适用于该页面所属类别的切换容器,其余的都关闭。我已经研究了两个小时了,还是想不出来。
这是我写的:

$(document).ready(function () {
    $(".toggle-container:not(#commercial:next.toggle_container").hide();
    $("#commercial").addClass("active").children().show();
    $(".trigger").click(function () {
        $(".toggle_container:visible").slideUp('slow');
        $(this).toggleClass("active").next().slideToggle("slow");
        return false;
    });
});

css:

.toggle_container {
    display: none;
}

html片段:

<div class="accordian">
  <h3 id="rack-structures" class="trigger"><a href="#">Rack Structures</a></h3>
  <div class="toggle_container">
    <div class="block">
      <p><a href="HEB-grocery-rack-structure-steel-contractor.html?panel=4"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />H-E-B Corporation</a></p>
      <p> <strong>Location:</strong> San Antonio TX</p>
      <p> Midwest Steel has great experience with specialized rack structure projects. This project was for a very large grocery chain serving the state of Texas.</p>
    </div>
  </div>
  <!--  tab entry  -->
  <div class="accordian">
    <h3 id="commercial" class="trigger"><a href="#">Commercial</a></h3>
    <div class="toggle_container">
      <div class="block">
        <p><a href="commercial-high-rise-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Hyatt Corporation World Headquarters<br />
          Chicago, IL</a></p>
        <p><a href="hotel-casino-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />MGM Grand Hotel Casino<br />
          Detroit, MI</a></p>
        <p><a href="convention-center-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Cobo Center<br />
          Detroit, MI</a></p>
      </div>
    </div>
  </div>
  <!--  tab entry  -->
  <div class="accordian">
    <h3 id="airport-aerospace" class="trigger"><a href="#">Airport/Aerospace</a></h3>
    <div class="toggle_container">
      <div class="block">
        <p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />NASA Moblie Launcher<br />
          Kennedy Space Center, FL</a></p>
        <p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Detroit Metropolitan Airport North Terminal Expansion<br />
          Romulus, MI</a></p>
        <p><a href="airport-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Wichita Mid-Continent Airport <br />
          Wichita, KS</a></p>
      </div>
    </div>
  </div>
ktecyv1j

ktecyv1j1#

此行包含错误:

$(".toggle-container:not(#commercial:next.toggle_container").hide();

检查了控制台,它就在那里。把它改成:

$(".toggle-container:not(#commercial + .toggle_container)").hide();
qq24tv8q

qq24tv8q2#

你只是在这一行缺少了一个结束括号:

$(".toggle-container:not(#commercial:next.toggle_container").hide();

应为:

$(".toggle-container:not(#commercial:next.toggle_container)").hide();

jsFiddle

相关问题