单击标题外侧的跨度时如何打开手风琴

时间:2016-06-20 09:32:59

标签: javascript jquery jquery-ui jquery-ui-accordion

我无法从标题

的外侧打开手风琴

在我的情况下,有一个 div 与id accordion

<div id="accordion">
    <h3 style="width:400px;">Product Description</h3>
    <div>Content Panel 1</div>
    <h3 style="width:400px;">Product Specification</h3>
    <div>Content Panel 2</div>

    <h3 style="width:400px;">Shiping+Return Polices</h3>
    <div>Content Panel 3</div>
    <h3 style="width:400px;" id="ac">Product Reviews</h3>
    <div id="newdivratting">

    </div>
    <h3 style="width:400px;">QuestionAnswer</h3>
    <div id="QuestionAnswer">
    </div>
    <h3 style="width:400px;">Close All</h3>
    <div>Closed.</div>
</div>

span 标记,位于手风琴之外

<span style="padding:10px;" class="span-click" id="reviewread">Click me</span>

我想点击这个 span 然后打开第4个手风琴,其标题是产品评论

我的jquery代码是

   $("#reviewread").click(function () {
            $("accordion>#ac").accordion("activate", true);
           // $('html,body').animate({
              //  scrollTop: $("#newdivratting").offset().top
           // },
             //   'slow');
        });

我该如何解决它请帮忙。

1 个答案:

答案 0 :(得分:0)

您可以触发目标元素的点击:

&#13;
&#13;
$("#accordion").accordion();
$("#reviewread").click(function(e) {
  $("#ac").trigger("click");
});
&#13;
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<span style="padding:10px;" class="span-click" id="reviewread">Click me</span>
<div id="accordion">
  <h3 style="width:400px;">Product Description</h3>
  <div>Content Panel 1</div>
  <h3 style="width:400px;">Product Specification</h3>
  <div>Content Panel 2</div>

  <h3 style="width:400px;">Shiping+Return Polices</h3>
  <div>Content Panel 3</div>
  <h3 style="width:400px;" id="ac">Product Reviews</h3>
  <div id="newdivratting">

  </div>
  <h3 style="width:400px;">QuestionAnswer</h3>
  <div id="QuestionAnswer">
  </div>
  <h3 style="width:400px;">Close All</h3>
  <div>Closed.</div>
</div>
&#13;
&#13;
&#13;