使用Jquery打開第二個Accordion Menu選項卡

Question

我是jQuery的新手。我想在頁面加載中打開第二個選項卡（操作）作為deafult。

<HTML>
</HEAD>
<BODY>
<br></br>
<H2> Automation </H2>
<br></br>
<ul id="accordion">
    <li>Operations</li>
    <ul>
        <li><a href="#">Add</a></li>
        <li><a href="#">Delete</a></li>

    </ul>
    <li>Deatils</li>
    <ul>
    <br></br>
<table border="" bordercolor="#FFCC00" style="background-color:#FFFFFF" width="400" cellpadding="8" cellspacing="1">
    <tr>
        <td><input type="Radio" name="radio_name" value="radio_val">1</td>
        <td>.</td>
        <td>.</td>
        <td>.......</td>
    </tr>
    <tr>
        <td><input type="Radio" name="radio_name" value="radio_val">2</td>
        <td>.</td>
        <td>.</td>
        <td>.......</td>
    </tr>

</table>

    </ul>
        </ul>  

</BODY>

</HTML>

我使用了以下代碼。但它不起作用

     <SCRIPT>   

 $("#accordion > li").click(function(){

    $('#accordion li:eq(1)').show();

        if(false == $(this).next().is(':visible')) {
            $('#accordion > ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

$('#accordion > ul:eq(0)').show();

</SCRIPT>

頁面加載時如何將第二個選項卡設置為打開默認值。

Answer 1

    <script>   
    $(document).ready(function(){

        $('#accordion li:eq(1)').show(); // second tab show
 $('#accordion li:eq(1) ul').show(); // second tab show

        $("#accordion > li").click(function(){

            if($(this).next().is(':visible')) {
                $('#accordion > ul').slideUp(300);
            }
           $(this).next().slideToggle(300);
        });

    });
    </script>

Answer 2

好像你沒有完全使用JQuery手風琴。

這是一個用於JQuery手風琴的JSFiddle演示，默認情況下打開第二個選項卡。

HTML

<br></br>
<H2> Automation </H2>
<br></br>
<ul id="accordion">
   <h3>Operations</h3>
    <div>
    <ul>
        <li><a href="#">Add</a></li>
        <li><a href="#">Delete</a></li>

    </ul>
    </div>
    <h3>Deatils</h3>
    <ul>
    <br></br>
<table border="" bordercolor="#FFCC00" style="background-color:#FFFFFF" width="400" cellpadding="8" cellspacing="1">
    <tr>
        <td><input type="Radio" name="radio_name" value="radio_val">1</td>
        <td>.</td>
        <td>.</td>
        <td>.......</td>
    </tr>
    <tr>
        <td><input type="Radio" name="radio_name" value="radio_val">2</td>
        <td>.</td>
        <td>.</td>
        <td>.......</td>
    </tr>

</table>

    </ul>
        </ul>

JQUERY

$(function() {
    $( "#accordion" ).accordion();
    $( "#accordion" ).accordion("activate",1);
  });

檢查我所做的HTML更改。

檢查如何執行JQuery手風琴

使用Jquery打開第二個Accordion Menu選項卡

問題描述

2 個解決方案

解決方案1
1 2013-08-22 10:28:07

解決方案2
1 已采納 2013-08-22 10:49:47

使用Jquery打開第二個Accordion Menu選項卡

問題描述

2 個解決方案

解決方案1 1 2013-08-22 10:28:07

解決方案2 1 已采納 2013-08-22 10:49:47

解決方案1
1 2013-08-22 10:28:07

解決方案2
1 已采納 2013-08-22 10:49:47