Question

我在每个页面上都有一个手风琴但只想打开适用于页面所在类别的切换容器，其余部分要关闭。我已经研究了2个小时，但无法理解。

这就是我写的：

$(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>

Answer 1

此行包含错误：

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

检查控制台，它就在那里。改变它：

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

Answer 2

你在这一行中错过了一个右括号：

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

应该是：

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

jsFiddle

jQuery下一个选择器不工作，手风琴的语法调整

2 个答案: