Question

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

首先隐藏所有.details，然后将所有.right-arrow的文字设置为“+”。

编辑：

如评论所示，我切换到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>

Answer 2

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

$(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("+");
    }
  });
});

Answer 3

使用简单.not()即可实现此目的。当一个手风琴被打开时，另一个需要slideUp()，其他需要的标志是'+'

以下是工作代码：

＆＃13;

$(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("+");
    }
  });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

<%=Session session = request.getSession();
Enumeration attributeNames = session.getAttributeNames();
while (attributeNames.hasMoreElements()) {
String name = attributeNames.nextElement();
String value = session.getAttribute(name);
System.out.println(name + "=" + value);}%>

  $("#accordion > li > span").click(function() {
    $(this).closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250);
    $(this).toggleClass("active").next('div').slideToggle(250);
});

#accordion {
	list-style: none;
	padding: 2px;
}
#accordion > li {
	display: block;
	list-style: none;
}
#accordion > li > span {
	display: block;
	color: #fff;
	margin: 4px 0;
	padding: 6px;
	background: url(images/expand_arrow.png) no-repeat 99.5% 6px #525252;
	background-size: 20px;
	font-weight: normal;
	cursor: pointer; font-size:16px
}
#accordion > li > div {
	list-style: none;
	padding: 6px;
	display: none; overflow:auto
}
#accordion > ul li {
	font-weight: normal;
	cursor: auto;
	padding: 0 0 0 7px;
}
#accordion a {
	text-decoration: none;
}
#accordion li > span:hover {
}
#accordion li > span.active {
	background: url(images/collapse-arrow.png) no-repeat 99.5% 6px #000;
	background-size: 20px
}

这是实现它的另一种方式，但@Anurag Daolagajao已经对你的代码进行了更正

当我们打开一个手风琴时，其他人应该关闭

4 个答案: