0

有人可以告诉我为什么以下示例在 Firefox 中有效，但在 IE 8 中无效？只有 content_1 在 IE 8 中正常工作。

谢谢你。

<script type="text/javascript">

$(function(){
    $("#sortable").sortable({handle: '#dragable'});
});


$(function(){

   var v;

  $('div[id^="content_"]').hover(

        function () {

        v = $(this).attr('id');
            $('#'+v+' #menu').show();
            $('#'+v+' #dragable').show();
        },
        function () {
            $('#'+v+' #menu').hide();
            $('#'+v+' #dragable').hide();
        }
    );

});

</script>


<body>

<div id='sortable'>

    <div id='content_1'>

        <div id='menu' style='display:none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_1</div>

        <div id='dragable' style='display:none;'>[drag]</div>
    </div>




    <div id='content_2'>

        <div id='menu' style='display: none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_2</div>

        <div id='dragable' style='display:none;'>[drag]</div>
    </div>





    <div id='content_3'>

        <div id='menu' style='display: none;'>
            <div>edit</div>
            <div>add</div>
            <div>delete</div>
        </div>

        <div id='content'>Content_3</div>

        <div id='dragable' style='display: none;'>[drag]</div>
    </div>

</div>



</body>
4

2 回答 2

2

ID 在一个页面中必须是唯一的（html 规范 [1]）；您有 2 #menu,#content等。将它们更改为 eg<div class="menu">并将您的选择器更改为.menu-- 应该可以。

顺便说一句，您可以使用find[2] 简化悬停回调：

function () {
    $(this).find('.menu, .dragable').show(); 
}

1：http
://www.w3.org/TR/html401/struct/global.html#h-7.5.2 2：http ://api.jquery.com/find/

于 2010-02-27T00:24:45.460 回答
0

您不能有多个具有相同 ID 的元素，这是无效的 HTML，ID 必须是唯一的。您的菜单元素需要是类而不是 ID，如下所示： 

<div id='content_1'>

    <div class='menu' style='display: none;'>
        <div>edit</div>
        <div>add</div>
        <div>delete</div>
    </div>

    <div class='content'>Content_2</div>

    <div class='dragable' style='display:none;'>[drag]</div>
</div>

像这样的jQuery：

$(function(){
  $('div[id^="content_"]').hover(
        function () {
          $(this).find('.menu, .dragable').show();
        },
        function () {
          $(this).find('.menu, .dragable').hide();
        }
    );
});
于 2010-02-27T00:27:46.883 回答