使用jQuery包裝跨度

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 <span></span> ，這就是瀏覽器可能會刪除它的原因。 因此，嘗試使用<span>&nbsp;</span>

或者，您可以將一些文本放在span中並使用font-size: 0; 為了那個原因。

還可以嘗試使用e.stopPropagation()而不是e.preventDefault()

Answer 2

您的代碼運行正常。 單擊標簽時未跨度刪除。

我已經在jsfiddle中測試過，找到下面的鏈接

JSFIDDLE鏈接

我不確定，也許您的標記中需要空格（'＆nbsp'），否則CSS會影響您的箭頭路徑

代碼：

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

Answer 3

<span>元素不會被刪除。 它是一個內聯元素，因此寬度和高度不適用於它。 您可以通過添加display: inline-block;來將其更改為block元素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;
}