javascript - jQuery UI Accordion 插件和显示隐藏切换在所有 Accordion div 上激活

Question

Stack Overflow 贡献者们大家好，

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

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

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

代码如下:

<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

看起来您的 Accordion 插件有一个激活事件。 http://api.jqueryui.com/accordion/#event-activate当面板被激活时会触发此事件。当激活事件被触发时，您需要隐藏您的内容。