jQuery手风琴隐藏在动态页面中的表中 [英] JQuery Accordion Buried in a Table within Dynamic Page

查看:66
本文介绍了jQuery手风琴隐藏在动态页面中的表中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试访问隐藏在Divs和其他东西下的手风琴的Moveover属性.这是HTML:

I'm trying to access the Moveover property of an Accordion buried under Divs and other stuff. Here is the 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> 

这是我用来尝试访问手风琴按钮的脚本的一部分:

Here is the portion of the script I'm using to TRY to access the Accordion buttons:

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

我在Mouseover函数中放置了一个ALERT命令,它从不触发,所以我知道我没有正确到达手风琴"按钮.有人可以帮忙吗?

I've placed an ALERT command inside the Mouseover function and it never fires, so I know I'm not reaching the Accordion button properly. Can anyone help?

已添加:这是整个JQuery脚本.它不大,但是很多余.我将此ASP.NET页作为动态网页.我知道我有多余的人,但我是JQuery的新手:

Added: Here is the entire JQuery script. It's not big, but it's redundant. I have this ASP.NET page as a dynamic web page. I know I have redundancies, but I'm new at JQuery:

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

// Check for hash value in 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(){

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

});

推荐答案

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

I solved this issue by removing the code that enabled dynamic pages. That simplified the code and removed a level of complexity.

上面显示的代码有效,我什至使它更加出色.如果您对此感到好奇,请访问我的测试网站.

The code shown above works, and I even made it fancier. If you are curious about it, check out my test site.

这篇关于jQuery手风琴隐藏在动态页面中的表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆