Javascript 使用Jquery包装一个范围

我有切换菜单。代码工作正常，问题是第一次在中出现跨距，但当我单击菜单时，跨距缺失。我用这个跨度来表示下箭头。我需要在每一次点击中都像下面的代码那样在里面包装一个跨度。这是我的密码

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

CSS

---

谢谢

您使用的是空html

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

或者您可以在span中放置一些文本，并使用

字体大小：0

也可以尝试
e.stopPropagation（）
而不是
e.preventDefault（）
您的代码运行正常。单击标记时未删除跨距

我已经在jsfiddle中进行了测试，找到下面的链接


我不确定，也许在你的a标签中需要像（' '）这样的空格，否则CSS会影响你的箭头路径

代码：

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

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

.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;
}

.srch btnnew span{
display:inline block；/*对我来说工作正常，检查是否有其他js正在修改它。在fiddle中，只需检查元素，它就会显示spanI真的无法理解您想要做什么？显示的代码中没有任何内容会改变html。必须来自其他代码。问题不是很清楚单击li时您是否面临问题nk那么span消失了你有没有现场演示？浏览器通常不会删除空的elements@Arun抱歉！可能还有其他问题…]
// Initially hide submenu
     $('#cssmenu').hide();
     $('#open-menu').click(function (e) {
         //Prevent href
         e.preventDefault();
         // Toggle the menu item
         $('#cssmenu').toggle();
     });

.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;
}