代码之家 › 专栏 › 技术社区 › Robert

JQuery Accordion隐藏在动态页面中的表中

jquery

Robert · 技术社区 · 15 年前

我正试图进入一个藏在沙发床和其他东西下面的手风琴的移动房地产。以下是HTML:

<body>
    <form id="form1" runat="server" >
    <div id="content" class="content">
    <table style="width: 1200px">
        <tr>
            <td style="width: 800px">
                <h1>Title here</h1><br />
                stuff here.. blah blah..

                <div id="wrapping" class="wrapping">
                    <p class="accordionButton"><strong>Water-Related Services</strong></p>
                    <div class="accordionContent">  
                        Item 1<br />
                        Item 2<br/>
                        Item 3<br />
                    </div>
                    <p class="accordionButton"><strong>Fire and Smoke Problem</strong></p>
                    <div class="accordionContent">
                        Item 1<br />
                        Item 2<br />
                        Item 3<br />
                   </div>
                    <p class="accordionButton"><strong>Mold Problems</strong></p>
                    <div class="accordionContent">
                        Mold Remediation<br />
                   </div>                       
                </div>
              </td>
              <td style="width:auto; text-align:center">
              <p style="text-align:center; font-size:xx-large; color:Red">CALL TODAY</p><br />                   
              </td>
          </tr>

    </table>
</div>

下面是我用来访问手风琴按钮的脚本部分:

    $('.wrapping').find('p.accordionButton').mouseover(function() {
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });

我在Mouseover函数中放置了一个ALERT命令,但它从不触发,所以我知道我没有正确地按下手风琴按钮。有人能帮忙吗?

补充 :这是整个JQuery脚本。它不大,但它是多余的。我将此ASP.NET页作为动态网页。我知道我有裁员,但我是JQuery的新人:

//检查URL中的哈希值
var hash=window.location.hash.substr(1);

var href = $('#nav li a').each(function(){   
    var href = $(this).attr('href');   
    if(hash==href.substr(0,href.length-4)){   
        var toLoad = hash + '.htm #content';   
        $('#content').load(toLoad)   
    }
    });

$(文档).ready(函数(){

    //ACCORDION BUTTON ACTION    
    $('.wrapping').find('p.accordionButton').mouseover(function() {
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $(".accordionContent").hide();



    if (hash=="") {
        $('#content').load("welcome.aspx #content", showNewContent());
    }   

    $('#nav li a').click(function(){   
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#wrapper').append('<span id="load">LOADING...</span>');   
        $('#load').fadeIn('normal');

        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())   
        } 
        function showNewContent() {   
            $('#content').show(hideLoader());
        } 
        function hideLoader() {   
            $('#load').fadeOut('normal');   
        }  
        return false;
    }); 

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())   
    } 
    function showNewContent() {   
        $('#content').show(hideLoader());
    } 
    function hideLoader() {   
        $('#load').fadeOut('normal');   
    }

});

2 回复 | 直到 15 年前

dmarucco 15 年前

您可以尝试消除这种模糊性:

<div id="wrapping" class="wrapping">

我建议你删除那个div上的类:

<div id="wrapping">

然后必须更改jQuery选择器:

$('#wrapping').find( ...

Robert 15 年前

我通过删除启用动态页面的代码解决了这个问题。这简化了代码,去掉了一个复杂程度。

上面显示的代码可以工作,我甚至使它更为美观。如果你对此感到好奇,请查看我的 test site .