2013-03-01 97 views
1

您好堆棧溢出的貢獻者,jQuery UI的手風琴插件和顯示隱藏切換激活所有手風琴的div

我使用jQuery UI插件的​​。我也有一個show hide功能。當用戶選擇一個手風琴標題項目時,div會正確打開內容。我有一段內容,然後是「閱讀更多」和「隱藏」的show hide切換。

我的問題是,當有人讓他們的手風琴選擇看到可用內容並點擊「閱讀更多」,然後決定點擊另一手風琴選擇而不點擊「隱藏」時,下一張幻燈片將顯示「閱讀更多」內容,但現在說「閱讀更多」而不是「隱藏」。

我想完成的是讓每個手風琴選擇「更多」按照預期工作,而不是影響多個手風琴選擇。如果您有建議來最大限度地減少show hide切換,那也會很棒。先謝謝你!

的代碼如下:

<link rel="stylesheet" href="../css/style.css"> 

    <div id="accordion2"> 
     <h4>Accordion selection 1</h4> 
     <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <div class="slidingDiv"> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <p><a href="#" class="show_hide" >Read more</a></p> 
     </div> 
     <h4>Accordion selection 2</h4> 
     <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <div class="slidingDiv"> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <p><a href="#" class="show_hide" >Read more</a></p> 
     </div> 
     <h4>Accordion selection 3</h4> 
     <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <div class="slidingDiv"> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <p><a href="#" class="show_hide" >Read more</a></p> 
     </div> 
    </div> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 

    <script> 
    <!-- SHOW HIDE MORE --> 
    $(document).ready(function(){ 


     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

     $('.show_hide').toggle(function(){ 
     $(this).text('Read more'); 
     $(".slidingDiv").slideToggle(); 
     $(this).text('Hide'); 
     $(this).text('Hide'); 
    }, function() { 
     $(".slidingDiv").slideToggle(); 
     $(this).text('Read more'); 
     }); 
    </script> 

    <script> 
    $(function() { 
    $("#accordion2").accordion({ 
    heightStyle: "content", 
    }); 
    }); 
    </script> 

謝謝Leeish我增加了以下內容:

 activate: function(event, ui) { 
      $(".slidingDiv").slideToggle(); 
$('.show_hide').text('Read more'); 
      } 

回答