手风琴在点击另一个

Question

家伙！晚安！ 我是一名网络开发人员，但我仍缺乏一些技能。 我正在尝试应用这种手风琴...... 当点击其中一个手风琴时，如何关闭另一个打开的手风琴？ 我尝试使用html中的“onClick”属性但到目前为止没有成功。 谢谢你的帮助。谢谢。 这是我的代码：

<ul>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>Languages Used</h2>
    <p>TEXT</p>
  </li>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>How it Works</h2>
    <p>TEXT.</p>
  </li>
</ul>

CSS：（SASS）

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif


ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0

  li
    position: relative
    padding: 0
    margin: 0

    @extend .flipIn

    &:nth-of-type(1)
      animation-delay: 0.5s

    &:nth-of-type(2)
      animation-delay: 0.75s

    &:nth-of-type(3)
      animation-delay: 1.0s

    &:last-of-type
      padding-bottom: 0

    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0

      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px

      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )

      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )

    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0

      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )

        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )

          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

Answer 1

我很确定你没有JS可以做到这一点 - this answer可能重复（不能标记为重复所以......）

以下是user @ Kymera28的代码和JSFiddle

＆＃13;

＆＃13;

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});

＆＃13;

/*Tips & Tricks Page*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

#trickslist {
    font-family: 'Open Sans', sans-serif;
    width: 80%;
    margin: 0 auto;
    display: table;
}
#trickslist ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#trickslist ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
#trickslist ul:last-child {
    border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.tipstricks {
    padding: 5px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

span {
    font-size: 12.5px;
}
#left,#right{
    display: table;
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 14px;
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
}
.detail span{
    margin: 0;
}
.right-arrow {
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="text-center"><em>Tips & Tricks</em></h2>

<div class="container">
    <div class="row" id="accordion1">
        <div id="trickslist">
            <ul>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <div>
                            <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
                        </div>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">What to expect over time.</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Quitting tobacco with medications</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Dealing with depression or stress</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
                    </a>
                    <div class="detail">

                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;