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

how to open a accordion when click a span which out side of heading

我无法从标题的外侧打开手风琴

在我的例子中有一个 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 然后打开标题为 Product Reviews

的第 4 个手风琴

我的jquery代码是

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

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

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

$("#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>