javascript - 单击标题外侧的跨度时如何打开 Accordion

Question

我无法从标题外侧打开 Accordion

就我而言，有一个带有 id Accordion 的 div

<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>

和一个位于 Accordion 外部的span标签

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

我尝试点击此span，然后打开第四个 Accordion ，其中标题为产品评论

我的jquery代码是

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

我该如何修复它，请帮忙。

Answer 1

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

$("#accordion").accordion();
$("#reviewread").click(function(e) {
  $("#ac").trigger("click");
});

<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>