當我們打開一個手風琴時，另一個手風琴應該關閉

當另一個手風琴打開時，我必須關閉手風琴。我必須一次只顯示一個手風琴。目前，手風琴允許您一次打開多個面板。如果我打開一個選項卡，然後打開另一個選項卡，則兩個選項卡將同時打開。我只能顯示一個。你能幫我嗎？當我們打開一個手風琴時，另一個手風琴應該關閉

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

來源

2017-05-06 Narendra Verma

檢查我的答案 –

使用簡單的.not()就可以實現這一點。當一個手風琴打開其他需要slideUp()也是其他需要的標誌是'+'

下面是工作代碼：

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

來源

2017-05-06 06:25:08

感謝您答覆Mr.Sahil爲我完美工作。 Upvote從我身邊 –

只是隱藏所有.details第一和設定的所有.right-arrow爲「+」的文字。

編輯：

正如評論所說，我切換到效果基本show更好的視覺

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

來源

2017-05-06 06:08:41

'slideUp（）'會比'hide（）'更合適:) – Akshay

無論他感覺如何使用。我想解釋的是，在擴展任何內容之前，他需要隱藏所有內容。但我會實施你的建議 –

是的，它只是他使用'slideToggle（）'所以它會更好'slideUp' – Akshay

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="accordion"> 
 
    <li><span>Tab 1</span> 
 
    <div> 
 
tab1 
 
    
 
    </div> 
 
    </li> 
 
    <li><span>Tab 2</span> 
 
    <div> 
 
    Tab 3 
 
    </div> 
 
    
 
    </li> 
 
    
 
    <li><span>tab 3</span> 
 
    <div> 
 
    tab 3 
 
    </div> 
 
    </li> 
 
    
 
    <li><span>tab 4</span> 
 
    <div> 
 
Tab 4 
 
     </div> 
 

 
    
 
    </li> 
 
    
 
</ul>

的IS另一種方法來實現它，但@Anurag Daolagajao已經更正爲您的代碼

來源

2017-05-06 06:13:45

請參閱下面的代碼。 +（摺疊）和 - （展開）正常工作。

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

來源

2017-05-06 06:19:53

Mr.Ganesh Snippet顯示錯誤。 –

@Narendra。請立即檢查 –

感謝您回覆Mr.Ganesh先生，您的代碼正在爲我工作，但不是我想要的那麼多。Upvote從我身邊 –

當我們打開一個手風琴時，另一個手風琴應該關閉

回答

相關問題