问题：

当我们打开一个手风琴时，另一个应该合上

洪越泽

2023-03-14

当另一个手风琴打开时，我必须关闭手风琴。我一次只能显示一个手风琴打开。目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。我只能显示一个。你能帮我吗？

$(function() {
  $(".expand").on( "click", function() {

    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");
    
    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

#integration-list {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: 0 auto;
    display: table;
}
#integration-list ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#integration-list ul > li {
    list-style: none;
/*    border-top: 1px solid #ddd;*/
    display: block;
    padding: 15px;
    overflow: hidden;
}

#integration-list ul > li > a:hover
{
    text-decoration: none;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.expand h2{
    font-size: 28px;
}
#sup{
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}
.detail {
    margin: 0 34px;
    display: none;
    line-height: 22px;
    /*height: 150px;*/
}

.detail h2{
    font-size: 18px;
    color: #000;
}
.right-arrow {
/*    margin-top: 12px;*/
    margin:0 20px;
    width: 10px;
    height: 100%;
    float: left;
    font-weight: bold;
    font-size: 20px;
}
.icon {
    height: 75px;
    width: 75px;
    float: left;
    margin: 0 15px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">

<div id="integration-list">
    <ul>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
            </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>        
     </li>


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

共有3个答案

乌杰

2023-03-14

请参阅下面的代码。（折叠）和-（展开）正常工作。

$(function() {
  $(".expand").on( "click", function() {
    $(".detail").hide();
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $(this).next().slideToggle(200);
      $(".expand").find(">:first-child").text("+");
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

隗轶

2023-03-14

只需隐藏所有。首先查看详细信息，然后设置所有内容的文本。向右箭头至“”。

编辑：

正如评论所建议的，我切换到SlideUp以获得更好的视觉效果

$(function() {
  $(".expand").on( "click", function() {
    if ($(this).find(".right-arrow").text() === "-") {
      return;
    }

    $(".detail").slideUp();
    $(".right-arrow").text("+");
    
    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");
    
    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

#integration-list {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: 0 auto;
    display: table;
}
#integration-list ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#integration-list ul > li {
    list-style: none;
/*    border-top: 1px solid #ddd;*/
    display: block;
    padding: 15px;
    overflow: hidden;
}

#integration-list ul > li > a:hover
{
    text-decoration: none;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.expand h2{
    font-size: 28px;
}
#sup{
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}
.detail {
    margin: 0 34px;
    display: none;
    line-height: 22px;
    /*height: 150px;*/
}

.detail h2{
    font-size: 18px;
    color: #000;
}
.right-arrow {
/*    margin-top: 12px;*/
    margin:0 20px;
    width: 10px;
    height: 100%;
    float: left;
    font-weight: bold;
    font-size: 20px;
}
.icon {
    height: 75px;
    width: 75px;
    float: left;
    margin: 0 15px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">

<div id="integration-list">
    <ul>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
            </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>        
     </li>


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

陆畅

2023-03-14

使用简单的<代码>。not（）您可以实现这一点。当一个手风琴打开时，另一个手风琴需要滑动（），另一个手风琴的符号也需要是

以下是工作代码：

$(function() {
  $(".expand").on( "click", function() {
  var x = $(this).next();
    $('.detail').not(x).slideUp();
   
    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");
    
    if($expand.text() == "+") {
      $expand.text("-");
      $('.right-arrow').not($expand).text("+");
    } else {
      $expand.text("+");
    }
  });
});

#integration-list {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: 0 auto;
    display: table;
}
#integration-list ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#integration-list ul > li {
    list-style: none;
/*    border-top: 1px solid #ddd;*/
    display: block;
    padding: 15px;
    overflow: hidden;
}

#integration-list ul > li > a:hover
{
    text-decoration: none;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.expand h2{
    font-size: 28px;
}
#sup{
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}
.detail {
    margin: 0 34px;
    display: none;
    line-height: 22px;
    /*height: 150px;*/
}

.detail h2{
    font-size: 18px;
    color: #000;
}
.right-arrow {
/*    margin-top: 12px;*/
    margin:0 20px;
    width: 10px;
    height: 100%;
    float: left;
    font-weight: bold;
    font-size: 20px;
}
.icon {
    height: 75px;
    width: 75px;
    float: left;
    margin: 0 15px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">

<div id="integration-list">
    <ul>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
              </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>
        </li>
        <li>
            <a class="expand">
                <div class="right-arrow">+</div>
                <h2>Lorem ipsum dolor sit amet</h2>
            </a>

            <div class="detail">
                
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
                    </p>
               
         </div>        
     </li>


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

类似资料：

一次只能打开一个的手风琴

我有一个非常好的手风琴，它在网站上看起来很好，并且可以正常工作。但是，我正在尝试为其添加更多JavaScript功能，以使其看起来更专业。目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有的打开面
一次只能打开一个手风琴面板

有这个简单的手风琴，希望一次只打开一个手风琴面板。我的代码一直工作，直到我两次点击同一个面板试图关闭它。它不会关闭，并且总是有一个面板打开。有谁能指出我的逻辑哪里出了问题，以及如何解决？我包含了一段代码片段：
一次只能打开一个手风琴标签

我有一个手风琴，它的作品真的很好，它看起来很好的网站和工程，因为它应该。然而，我正在尝试向它添加更多的JavaScript功能，使它看起来更专业。目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有
多个引导手风琴与折叠其他当点击一个手风琴

我尝试了以下代码，除了图标外，一切都很好。我试图在Google上找到一些解决方案，但我找不到我正在寻找的解决方案。当我点击其中一个手风琴时，另一个手风琴应该折叠，当前点击的手风琴应该打开，同时fa图标应该根据手风琴的位置而改变。这是我到目前为止已经尝试过的
Twitter引导多个手风琴，但一次只能打开一个面板

问题内容：我的页面上有3个Twitter Bootstrap手风琴，每一个都这样设置：该“的手风琴s为像上面显示的一个，所以，和。每个手风琴的面板数相同。如何更改此设置，以便一次只能打开一个面板？目前，每个手风琴可以打开一个面板，这不是我想要的行为。演示： JSFiddle 问题答案：尝试这个：
来自W3C的手风琴-如何一次打开一个面板？

我有一个手风琴，一次只打开一个面板。我需要一些帮助，以能够关闭任何打开的面板时，用户点击打开一个关闭的面板。我想需要一些javascript来实现这一点——但我不确定如何实现……我将拥有比示例中所示更多的面板我有以下代码：

当我们打开一个手风琴时，另一个应该合上

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档