Question

我正在尝试访问埋在Divs和其他东西下的手风琴的Moveover属性。这是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>

以下是我用来尝试访问Accordion按钮的脚本部分：

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

我在鼠标悬停功能中放置了一个ALERT命令，它永远不会触发，所以我知道我没有正确到达Accordion按钮。有人可以帮忙吗？

已添加：这是整个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)   
    }
    });

$（document）.ready（function（）{

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

}）;

Answer 1

您可以尝试消除这种歧义：

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

我建议您删除该div上的类：

<div id="wrapping">

然后你必须改变jQuery选择器：

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

Answer 2

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

上面显示的代码有效，我甚至让它变得更加漂亮。如果您对此感到好奇，请查看我的test site。

JQuery手风琴埋在动态页面的表格中

2 个答案: