jQuery Accordion：单击Jumplink激活Panel

I'm not great with jQuery when it comes to manipulating javascript. I have this large file that I condensed into this fiddle. The format needs to be the same, and what I'm trying to do is: When clicking on the Jumplink in Question 4, it should open the panel in Question 1.

在操作javascript方面,我对jQuery并不擅长。我有这个大文件,我凝聚成这个小提琴。格式需要相同,我要做的是:当点击问题4中的Jumplink时,它应该打开问题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>

1 个解决方案

#1

Let me know if this is what you meant. The main thing I did is to trigger the click event on the q1.

如果这是你的意思,请告诉我。我做的主要是触发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>

$(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;
}

Option 2

you can remove the q1 id and change the js to:

你可以删除q1 id并将js更改为:

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

#1