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

Question

您好 Stack Overflow 贡献者，

我正在为accordion 使用jQuery UI 插件。我还有一个显示隐藏功能。当用户选择手风琴标题项时，div 会正确滑动内容打开。我有一段内容，然后是“阅读更多”和“隐藏”的显示隐藏切换。

我的问题是，当有人进行手风琴选择以查看可用内容并单击“阅读更多”然后决定单击另一个手风琴选择而不单击“隐藏”时，下一张幻灯片显示“阅读更多”内容但现在说“阅读更多”而不是“隐藏”。

我想要完成的是让每个手风琴选择“阅读更多”按预期工作，而不影响多个手风琴选择。如果您有建议将显示隐藏切换最小化，那就太好了。提前谢谢！

代码如下：

<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 当面板被激活时触发此事件。您需要在激活事件触发时隐藏您的内容。