1

我已经设法使用codepen 中的此代码为 WordPress 存档和类别小部件创建自定义选择框。它在所有浏览器中都可以使用，除了链接无法正常工作，即选择选项时，它应该使用选项中的链接将您带入类别页面。

以下是默认情况下的 WordPress选择代码：

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <select name="cat" id="cat" class="postform">
        <option value="-1">Select Category</option>
        <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
    </select>
</div>

以下是从 codepen添加 JavaScript 代码后的 WordPress选择代码

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <div class="select">
        <select name="cat" id="cat" class="postform select-hidden">
            <option value="-1">Select Category</option>
            <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
        </select>
        <div class="select-styled">"Select Category"</div>
            <ul class="select-options" style="display: none;">
                <li rel="-1">Select Category</li>
                <li rel="10">Education&nbsp;&nbsp;(2)</li>
                <li rel="8">Entertainment&nbsp;&nbsp;(2)</li>
                <li rel="11">Finance&nbsp;&nbsp;(2)</li>
            </ul>
        </div>
    </div>
</div>

如您所见，我使用的 JavaScript 代码将选项标签更改为<option> tags<li>和. 下面是进行更改的 JavaScript 代码。value=""rel=""

$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        //console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

我不是 JavaScript 专家，我需要有人帮助我更改代码，以便选择框中选择的链接将您带到所引用的类别或存档页面。

4

0 回答 0