下拉菜單錯誤關閉並打開取決於點擊區域

Question

我不知道爲什麼會發生這種情況。 我複製與HTML，CSS和jQuery的手風琴，我遵循這個指南，我又把它適用於我的網站 「http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/」

我jQuery是一樣的，我的HTML和CSS是有點不同，因爲我定製它，但其基本相同。

HTML：

<div class="plan-container" style="flex: 0 0 25%;"> 
    <div class="plan-header-mec"> 
    <h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2> 
    </div> 
    <div class="plan-details"> 
    <div class="accordion"> 
     <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-1"> 
      <li class="fa fa-check">Title</li> 
     </a> 
     <div id="accordion-1" class="accordion-section-content"> 
      <p>Information.</p> 
     </div> 
     <!--end .accordion-section-content--> 
     </div> 
     <!--end .accordion-section--> 

     <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-2"> 
      <li class="fa fa-check">Title</li> 
     </a> 
     <div id="accordion-2" class="accordion-section-content"> 
      <p>Information</p> 
     </div> 
     <!--end .accordion-section-content--> 
     </div> 
     <!--end .accordion-section--> 

     <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-3"> 
      <li class="fa fa-check">Title</li> 
     </a> 
     <div id="accordion-3" class="accordion-section-content"> 
      <p>Information</p> 
     </div> 
     <!--end .accordion-section-content--> 
     </div> 
     <!--end .accordion-section--> 

     <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-4"> 
      <li class="fa fa-check">Title</li> 
     </a> 
     <div id="accordion-4" class="accordion-section-content"> 
      <p>Information</p> 
     </div> 
     <!--end .accordion-section-content--> 
     </div> 
     <!--end .accordion-section--> 

     <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-5"> 
      <li class="fa fa-check">Title</li> 
     </a> 
     <div id="accordion-5" class="accordion-section-content"> 
      <p>Information</p> 
     </div> 
     <!--end .accordion-section-content--> 
     </div> 
     <!--end .accordion-section--> 
    </div> 
    <!--end .accordion--> 
    <p>Conclusion</p> 
    </div> 
</div> 

CSS：

@media handheld (min-width: 480px) { 
    .plan-container { 
    display: inline-block; 
    } 
} 

@media (min-width: 992px) { 
    .plan-container { 
    display: table-cell; 
    } 
} 

@media (min-width: 1200px) { 
    .plan-container { 
    display: table-cell; 
    } 
} 

.plan-container { 
    width: 50%; 
    overflow: hidden; 
    border-radius: 5px; 
    background-color: #fff; 
    position: relative; 
    top: 0; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 

.plan-container .plan-header-mec { 
    padding: 50px 0; 
    border-radius: 5px 5px 0 0; 
    background-image: url(../img/mv-ber-vantagens-mecanico.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    text-align: center; 
} 

.plan-container .plan-header p { 
    margin: 0; 
    color: #447F71; 
} 

.plan-container .plan-details { 
    margin: 0 auto; 
    padding: 60px; 
    background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat; 
} 

.plan-container .plan-details ul { 
    padding-left: 0; 
    list-style: none; 
} 

.plan-container .plan-details ul li span { 
    font-weight: lighter; 
    /*color: #777777;*/ 
} 

.plan-container .plan-details p { 
    background-color: #f4f4f4; 
    margin: 2em 0; 
    padding: 1.25em; 
    font-size: 0.75em; 
    line-height: 1.8; 
    color: #777777; 
} 


/* Test accordion */ 

.accordion, 
.accordion * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.accordion { 
    overflow: hidden; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 
    border-radius: 3px; 
    background: #f7f7f7; 
    background-image: url(../img/fibra-carbono.jpg); 
} 


/*----- Section Titles -----*/ 

.accordion-section-title { 
    width: 100%; 
    padding: 15px; 
    display: inline-block; 
    border-bottom: 2px solid #333333; 
    /*Carbon Fiber Background*/ 
    /*Carbon Fiber Background*/ 
    transition: all linear 0.15s; 
    /* Type */ 
    font-size: 20px; 
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-shadow: 0px 1px 0px #1a1a1a; 
    color: #fff; 
} 


/*.accordion-section-title.active, .accordion-section-title:hover { 
     background:#4c4c4c; 
    }*/ 

.accordion-section:last-child .accordion-section-title { 
    border-bottom: none; 
} 


/*----- Section Content -----*/ 

.accordion-section-content { 
    padding: 15px; 
    display: none; 
} 


/* Test accordion */ 


/* Check Mark Color*/ 

.fa ul { 
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

.fa-check { 
    display: block; 
} 

.fa-check::before { 
    color: #66ff33; 
} 


/* Check Mark Color*/ 

最後我的jQuery

/*Accordion*/ 
$(document).ready(function() { 
    function close_accordion_section() { 
    $('.accordion .accordion-section-title').removeClass('active'); 
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
    } 

    $('.accordion-section-title').click(function(e) { 
    // Grab current anchor value 
    var currentAttrValue = $(this).attr('href'); 

    if ($(e.target).is('.active')) { 
     close_accordion_section(); 
    } else { 
     close_accordion_section(); 
     // Add active class to section title 
     $(this).addClass('active'); 
     // Open up the hidden content panel 
     $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    } 

    e.preventDefault(); 
    }); 
}); 

現在好了，我的問題是。我想要的是： 當我點擊標題1，信息1下拉。 （作品） 如果我點擊標題2.而信息1顯示，信息1關閉和打開信息2（作品）

現在我的問題是，如果信息2是打開，我想關閉它，當我點擊在標題上，下拉菜單中的字母再次打開並重新打開...如果我點擊字母以外的字母，它會正常工作。

在jQuery的

if($(e.target).is('.active')) { 

我改變了e.target到.accordion-section-title什麼happends是，它打開和關閉，當我點擊任何地方，字母或字母之外，但如果一個信息框openned和我點擊另一個另一個，另一個不打開，但打開的一個關閉。

我不知道自己能做什麼，如果你能幫助，我會apreciate它

Answer 1

可能您的e.target有時是錯誤的元素，實際上它取決於您實際點擊的位置。

舉例來說，如果你點擊一個子元素（如你的情況<li>元素）的條件$(e.target).is('.active')將失敗

嘗試使用此代碼來代替：

$('.accordion-section-title').click(function(e) { 
    // Grab current anchor value 
    var target = $(e.target).closest(".accordion-section-title"); 
    var currentAttrValue = $(target).attr('href'); 

    if($(target).is('.active')) { 

Answer 2

不完全是一個答案（尚未50聲譽，所以我不能發表評論，對不起），但沒有任何（好？）理由不使用JQueryUI accordion？
如果你不想使用所有的jQueryUI（我可以理解），你可以「孤立」只是在自定義下載部分的手風琴插件。
我可能比你想寫imho最簡單。