jQuery UI的手风琴插件和显示隐藏切换激活所有手风琴的div

Question

您好堆栈溢出的贡献者，

我使用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'); 
      } 

Answer 1

它看起来像你的手风琴插件有激活事件。 http://api.jqueryui.com/accordion/#event-activate当面板激活时会触发此事件。激活事件时，您需要隐藏您的内容。