1

我已经编写了一个实现 jQuery 手风琴的代码。它在普通网络中工作正常，但在内容占位符 JavaScript （.js 文件）中没有触发 ul 标记的客户端 ID。请看下面的代码：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style>
    body, input {
        font-family: Calibri, Arial;
    }

    #Accordion {
        list-style: none;
        padding: 0 0 0 0;
        width: 250px;
    }

        #Accordion li {
            display: block;
            background-color: #323232;
            font-weight: bold;
            margin: 1px;
            cursor: pointer;
            padding: 5px 5px 5px 7px;
            list-style: circle;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            color: white;
        }

        #Accordion ul {
            list-style: none;
            padding: 0 0 0 0;
            display: none;
        }

            #Accordion ul li {
                font-weight: normal;
                cursor: auto;
                color: #323232;
                background-color: #fff;
                padding: 0 0 0 7px;
            }

        #Accordion a {
            text-decoration: none;
        }

            #Accordion a:hover {
                text-decoration: underline;
            }
</style>

<script>
    $('#' + '<%= Accordion.ClientID %> > li').click(function () {

        if (false == $(this).next().is(':visible')) {
            $('#' + '<%= Accordion.ClientID %> > ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });

    $('#' + '<%= Accordion.ClientID %> > ul:eq(0)').show();

</script>

<div style="float: left; padding: 0px 0px 10px 10px;">
                    <ul id="Accordion" class="accordion" runat="server">
                        <li>Sports</li>
                        <ul>
                            <li>Golf</li>
                            <li><a href="#">Cricket</a></li>
                            <li><a href="#">Football</a></li>
                        </ul>
                        <li>Technology</li>
                        <ul>
                            <li><a href="#">iPhone</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Twitter</a></li>
                        </ul>
                        <li>Latest</li>
                        <ul>
                            <li><a href="#">Obama</a></li>
                            <li><a href="#">Iran Election</a></li>
                            <li><a href="#">Health Care</a></li>
                        </ul>
                    </ul>
                </div>
</asp:Content>

谁能帮我解决这个问题？谢谢！

4

2 回答 2

2

我想您需要将代码放入.ready函数中：

$(document).ready(function() {
   // Your code goes here
});


解释：

问题是当您触发代码时，内容尚未完全加载。它还没有出现在DOM上，因此被 jQuery 忽略了。如果您在 HTML 文件中运行它，就像您将代码放在下面一样，因为它是在之后执行的，所以找到了该元素并且您的代码以预期的方式工作！

阅读有关jQuery .ready() 函数的更多信息

编辑1：

将您的代码放在.js文件中并将其包装在.ready()函数中，如下所示：

$(document).ready(function() {
  $('#' + '<%= Accordion.ClientID %> > li').click(function () {
        if (false == $(this).next().is(':visible')) {
            $('#' + '<%= Accordion.ClientID %> > ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
    $('#' + '<%= Accordion.ClientID %> > ul:eq(0)').show();
});

编辑2：

我怀疑它是否会像这样从.js<%= Accordion.ClientID %>文件内部正确处理？

编辑 3：

就像我说的，您的 ASP 脚本将无法<%= Accordion.ClientID %>从.js文件内部正确处理。

我会创建一个var，然后使用 jQuery获取它的值。

  1. 把它放到你的HTML（ASP 页面）的某个地方：

<div id="current_client_id" style="display:none"><%= Accordion.ClientID %></div>

  1. 然后在您的jQuery代码中，获取该变量并将其添加到您的旧代码中：

更新代码： 

$(document).ready(function() {
      var AccordionClientID = $('#current_client_id').html(); 
      $('#' + AccordionClientID + ' > li').click(function () {
            if (false == $(this).next().is(':visible')) {
                $('#' + AccordionClientID + ' > ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
        });
        $('#' + AccordionClientID + ' > ul:eq(0)').show();
    });
于 2013-10-13T13:24:20.323 回答
-1

把你的代码放在这里

<script type="text/javascript">
    $(function(){
      $('#' + '<%= Accordion.ClientID %>'+' li').click(function () {
            if (false == $(this).next().is(':visible')) {
                $('#' + '<%= Accordion.ClientID %>' +  ' ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
        });
        $('#' + '<%= Accordion.ClientID %>'+  ' ul:eq(0)').show();
    });
</script>
于 2013-10-13T13:26:21.710 回答