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

Posted 2023-02-25

【中文标题】jQuery下一个选择器不起作用，手风琴的语法调整

【英文标题】：jQuery next selector not working, syntax adjustment for accordion

【发布时间】：2013-06-12 16:56:49

【问题描述】：

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

<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"    />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"    />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"    />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"    />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"    />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"    />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"    />Wichita Mid-Continent Airport <br />
          Wichita, KS</a></p>
      </div>
    </div>
  </div>

【参考方案1】：

此行包含错误：

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

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

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

【讨论】：

哎呀，我看到了一个错误，但是上面的代码也不起作用。

【参考方案2】：

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

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

应该是：

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

jsFiddle

【讨论】：

试试这个link。这是你要找的吗？