Question

在操作javascript方面，我对jQuery不太满意。我有这个大文件，我凝聚成这个小提琴。格式需要相同，我想要做的是：单击问题4中的跳转链接时，应打开问题1中的面板。

http://jsfiddle.net/jzhang172/v5heud2x/1/

 $(function() {
    $( "#accordion" ).accordion();
     $( ".active" ).accordion({
 active: false,
  collapsible: true,
});
  });

div > p {
background:green;
}
.active{
    height:500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<li class="active">
    <h3><a href="www.google.com" name="google">Question 1</a></h3>
        <div>
            <p>Answer 1</p>
        </div>
</li>
<li class="active">
    <h3><a href="www.mangahere.com">Question 2</a></h3>
        <div>
            <p>Answer 2</p>
        </div>
</li>
<li class="active">
    <h3><a href="www.twitter.com">Question 3</a></h3>
        <div>
            <p>Answer 3</p>
        </div>
</li>
<li class="active">
    <h3><a href="www.facebook.com">Question 4</a></h3>
        <div>
            <p>Answer 4 <a href="#google">(jumplink to answer 1)</a></p>
        </div>
</li>
</div>

Answer 1

如果这是你的意思，请告诉我。我做的主要是触发q1上的click事件。

JSFiddle

<强> HTML

<div id="accordion">
    <li class="active">
         <h3 id="q1"><a href="www.google.com" name="google">Question 1</a></h3>

        <div>
            <p>Answer 1</p>
        </div>
    </li>
    <li class="active">
         <h3><a href="www.mangahere.com">Question 2</a></h3>

        <div>
            <p>Answer 2</p>
        </div>
    </li>
    <li class="active">
         <h3><a href="www.twitter.com">Question 3</a></h3>

        <div>
            <p>Answer 3</p>
        </div>
    </li>
    <li class="active">
         <h3><a href="www.facebook.com">Question 4</a></h3>

        <div>
            <p id="q4">Answer 4 <a href="#google">(jumplink to answer 1)</a>
            </p>
        </div>
    </li>
</div>

<强> JS

$(function () {
     $("#accordion").accordion();
     $(".active").accordion({
         active: false,
         collapsible: true,
     });
 });

 $(document).ready(function () {
     $("#q4").click(function () {
         $( "#q1" ).trigger( "click" );
     });
 });

<强> CSS

div > p {
    background:green;
}
.active {
    height:500px;
}

选项2

您可以删除q1 ID并将js更改为：

 $("#q4").click(function () {
    $("#accordion").accordion("option", "active", 0);
 });

jQuery Accordion：单击Jumplink激活面板

1 个答案: