改變手風琴關閉第二次點擊

我做了一個網站使用WordPress的主題，有一個現場作曲家內置模塊。我正在嘗試更改編輯此手風琴，以便點擊時打開和關閉。改變手風琴關閉第二次點擊

下面是HTML的樣本

<div class="dslc-accordion"> 
<div class="dslc-accordion-item"> 
    <div class="dslc-accordion-header dslc-accordion-hook"> 
     <span class="dslc-accordion-title" style="font-size:16px; background-color:#f37024; color:#ffffff; font-family:Montserrat; padding:12px; margin-bottom:15px">bar equipment/supplies</span> 
    </div> 
    <div class="dslc-accordion-content"> 

    <a href="http://www.enofrigo.it/ita/index.php" target="_blank" style="font-size:14px; color:#f37024; font-family:Montserrat; padding-left:12px;"> 
     <img src="http://www.desertpeak.biz/temp_private_home/wp-content/uploads/2014/05/enofrigo.jpg" style="margin-bottom:5px"/> 
     </a> 
     <p style="font-size:13px; color:#f37024; font-family:Montserrat; padding-left:12px"> 
     <i>Wine Coolers, Cellars, and Refrigerators</i> 
     </p> 
     <p style="font-size:13px; color:#4d4d4f; font-family:Montserrat; padding-left:12px; line-height:16px"> 
     Established in 1978, the history of <i>Enofrigo</i> is characterized by the capacity of projecting and realizing the most elegant and innovative solutions in the foodservice industry. <i>Enofrigo</i> specializes in projecting and manufacturing refrigerating, hot and neutral units for foodservice/dining rooms, always looking for high-quality innovative technologic solutions in gastro-buffets, catering, restaurant/hotel showcases, bakeries, and supermarkets. 
     </p><br> 

    </div><!-- .dslc-accordion-content --> 
</div><!-- .dslc-accordion-item -->

這裏是什麼，我相信是腳本與它一起去：

(function($){ 

$(document).ready(function() { 

    // Expand/Collapse on click 
    $('.accordion-container').on('click keydown', '.accordion-section-title', function(e) { 
     if (e.type === 'keydown' && 13 !== e.which) // "return" key 
       return; 
     e.preventDefault(); // Keep this AFTER the key filter above 

     accordionSwitch($(this)); 
    }); 

    // Re-initialize accordion when screen options are toggled 
    $('.hide-postbox-tog').click(function() { 
     accordionInit(); 
    }); 

}); 

var accordionOptions = $('.accordion-container li.accordion-section'), 
    sectionContent = $('.accordion-section-content'); 

function accordionInit() { 
    // Rounded corners 
    accordionOptions.removeClass('top bottom'); 
    accordionOptions.filter(':visible').first().addClass('top'); 
    accordionOptions.filter(':visible').last().addClass('bottom').find(sectionContent).addClass('bottom'); 
} 

function accordionSwitch (el) { 
    var section = el.closest('.accordion-section'), 
     siblings = section.closest('.accordion-container').find('.open'), 
     content = section.find(sectionContent); 

    if (section.hasClass('cannot-expand')) 
     return; 

    if (section.hasClass('open')) { 
     section.toggleClass('open'); 
     content.toggle(true).slideToggle(150); 
    } else { 
     siblings.removeClass('open'); 
     siblings.find(sectionContent).show().slideUp(150); 
     content.toggle(false).slideToggle(150); 
     section.toggleClass('open'); 
    } 

    accordionInit(); 
} 

// Initialize the accordion (currently just corner fixes) 
accordionInit(); 

})(jQuery);

來源

2014-08-28 user3638339

歡迎SO。這是你的代碼在一個小提琴。請嘗試讓問題出現在那裏，並更好地解釋你的問題。 http://jsfiddle.net/2e75mycm/ – isherwood 2014-08-28 13:44:27

我希望你想像這樣？ HTML

<ul id="accordion"> 
    <li rel="1"> 
     <div class="title">title 2</div> 
     <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div> 
    </li> 
    <li rel="1"> 
     <div class="title">title 1</div> 
     <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div> 
    </li> 
    <li rel="1"> 
     <div class="title">title 1</div> 
     <div class="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div> 
    </li> 
<ul>

$(document).ready(function(){ 
    $("#accordion li .title").click(function(){ 
     if($(this).parent().attr("rel")=="1"){ 
     $(".content",$(this).parent()).stop(true,true).slideUp(500); 
      $(this).parent().attr("rel","0") 
    }else { 
     $(".content",$(this).parent()).stop(true,true).slideDown(500); 
      $(this).parent().attr("rel","1") 
    } 
    }) 

})

CSS

.title {background:#006;color:#fff}

http://jsfiddle.net/77njo5wz/3/

來源

2014-08-28 15:23:57 budamivardi

改變手風琴關閉第二次點擊

回答

相關問題