Question

我有切换菜单。代码工作正常，问题是第一次内部有一个跨度但是当我点击菜单时，跨度丢失了。我正在使用此跨度来显示向下箭头。我需要在每次点击时将内部包裹起来，如下面的代码所示。这是我的代码

    <div class="col-sm-12 seach-blk">
            <a href="#" class="srch-btnnew" id="open-menu">@selectedProductType <span></span></a>
    <div id='cssmenu'>
                    <ul>

    <li><a href='#'><span class="product-type">categoryName 1</span></a> </li>
    <li><a href='#'><span class="product-type">categoryName 2</span></a> </li>
    </ul>
</div>
</div>

Jquery的

$(document).ready(function () {
     // Initially hide submenu
     $('#cssmenu').hide();
     $('#open-menu').click(function (e) {
         //Prevent href
         e.preventDefault();
         // Toggle the menu item
         $('#cssmenu').toggle();
     });

 });

CSS

.srch-btnnew span {
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}

由于

Answer 1

您正在使用空的html ，这就是浏览器可能会删除它的原因。因此，请尝试使用 

或者您可以在范围内放置一些文字并使用font-size: 0;。

同时尝试使用e.stopPropagation()代替e.preventDefault()

Answer 2

您的代码运行正常。单击标记时不会删除跨度。

我已在jsfiddle中测试过，找到以下链接

JSFIDDLE LINK

我不确定，也许在您的标签中需要空间（＆＃39;＆amp; nbsp＆＃39;）否则CSS会影响您的箭头路径

代码：

// Initially hide submenu
     $('#cssmenu').hide();
     $('#open-menu').click(function (e) {
         //Prevent href
         e.preventDefault();
         // Toggle the menu item
         $('#cssmenu').toggle();
     });

Answer 3

未删除元素。它是内联元素，因此宽度和高度不适用于它。您可以通过将display: inline-block;添加到样式来将其更改为块元素。

.srch-btnnew span {
    display: inline-block;  /* <-- Add this to make it a block element */
    position: absolute;
    right: 15px;
    background: url(../images/down-arrownew.png) repeat-x;
    width: 12px;
    height: 9px;
    top: 22px;
}

使用Jquery包装跨度

3 个答案: