jQuery手风琴:在点击跳跃链接时激活面板

jQuery Accordion: Activating a Panel on clicking a Jumplink

本文关键字:链接 激活 跳跃 手风琴 jQuery      更新时间:2023-09-26

当涉及到操纵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>

让我知道这是否是你的意思。我所做的主要事情是触发q1.

上的click事件。

JSFiddle

<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);
 });