ドロップダウンメニューのバグクローズと開くクリック領域に応じて

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

[OK]を、私の問題があります。私がしたいもの： タイトル1をクリックすると、情報1のドロップダウンが表示されます。 （作品） 情報1が表示されているときにタイトル2をクリックすると、情報1が閉じて情報2（作品）が開きます

私の問題は、情報2が開いていて、タイトル上では、ドロップダウンが閉じて、再び開くためのタイトルの文字に...私が文字の外をクリックすると、それは正しく動作します。

jqueryので

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

私は.accordion-section-titleにe.targetを変え、何happendsで、私は任意の場所をクリックしたときには、文字または文字の外に、開閉が、情報ボックスはopennedされている場合、私はクリックしてくださいもう1つは開いていませんが、開いているものは閉じます。

あなたが助けることができる場合、私は、他に何を行うには見当がつかない、私はそれを

Answer 1

おそらくeターゲットは間違った要素ですが、実際にどこをクリックするかによって異なります。

たとえば、あなたは（あなたのケースで<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

をapreciateだろうない正確な答え（まだ50評判ので、私は、申し訳ありませんコメントすることはできません）が、任意があります（良い？）を使用しない理由JQueryUI accordion？
jQueryUIを使いたくない場合は、カスタムダウンロードセクションでアコーディオンプラグインのみを「分離」することができます。
私はあなたがimhoを書こうとしているものよりも簡単かもしれません。