0

我在每一页上都有一个手风琴，但只希望打开适用于该页面所在类别的切换容器，其余的要关闭。我一直在研究 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>
4

2 回答 2

0

您只是在这一行中缺少一个右括号：

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

应该：

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

jsFiddle

于 2013-06-12T17:18:49.947 回答
0

此行包含错误：

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

检查控制台，它就在那里。为此更改它：

$(".toggle-container:not(#commercial + .toggle_container)").hide();
于 2013-06-12T17:04:38.810 回答