Question

我编写了一个实现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>

有人可以帮我解决这个问题吗？谢谢！

Answer 1

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

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

说明：

问题在于，当您解雇代码时，内容尚未完全加载。它不在 DOM 上，因此被jQuery忽略了。如果你在你的HTML文件中运行它，大多数情况下你会把你的代码放在正确的位置，因为它之后被执行了，找到了那个元素并且你的代码是预期的！

详细了解jQuery .ready() function

编辑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：

我对<%= Accordion.ClientID %>有疑问，是否会从 .js 文件中正确处理它，只是显而易见？

编辑3：

就像我说的那样，你的ASP脚本不会从 .js 文件中正确处理<%= Accordion.ClientID %>。

我会创建 var ，然后使用jQuery获取值。

将此放入 HTML （ASP页面）：

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

然后在 jQuery 代码中，抓住 var 并将其添加到旧代码中：

更新的代码：

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

Answer 2

将您的代码放在这里

<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>

如果放入.js文件，则不会触发ul id

2 个答案:

说明：

编辑1：

编辑2：

编辑3：