Question

Hello Stack Overflow贡献者，

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

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

我想要完成的是让每个手风琴选择“阅读更多”按预期工作，而不会影响多个手风琴选择。如果你有建议尽量减少show hide toggle也会很棒。提前谢谢！

代码如下：

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

jQuery UI手风琴插件和show hide toggle激活所有手风琴div

1 个答案: