Question

我想要自定义属性来设置我的下拉菜单样式，或者使用我当前拥有的样式（使用div而不是）并使用jQuery来复制函数。

我目前认为我可能最适合后者，因为我的目标框（点击特定选项时会改变的目标框）与下面的选项不同。但是，我对任何有效的方法持开放态度。

在一个实例中，目标框将包含一个图标和标签，当点击下面的任何一个选项时，必须更改为该图标和标签（这是在我的jsfiddle的左侧）。另一个例子，目标框只包含一个图标，所以虽然下面的选项显示标签，但是当选中时，只有图标的文本值应该改变目标框。

希望以上内容有意义，下面的小提示应该可以帮助您想象它：

编辑*注意：带有字母的彩色框表示图标（我使用图标字体，因此每个字母代表一个图标），“Change Me”和“Label”代表需要更改的文本（at至少在左手边，右手边，只是图标交换）。

我当前的jQuery代码（它实际上只是用于下拉菜单功能...需要添加一些方法来切换目标框与点击的选项值。或者我想从html的方法去做它功能，只需重新设置它）

//sideUITopHead

$('#topHead').click(function(){

    if($('#sideUITopHeadContainer').is(':hidden')){

            $('#sideUITopHeadContainer').show();
            $('#sideUITopHeadContainer').animate({'height':'456px'});
            $('#topHead').addClass('active');
            $('#topHeadToggle').addClass('active');
    }

    else{

        $('#sideUITopHeadContainer').animate({'height':'0'}, function(){

                $('#sideUITopHeadContainer').hide();
                $('#topHead').removeClass('active');
                $('#topHeadToggle').removeClass('active');

        }); 
    }

});

//sideUITopIcon

//more

$('#topIconMore').click(function(){

    if($('#sideUITopIconMoreContainer').is(':hidden')){

            $('#sideUITopIconMoreContainer').show();
            $('#sideUITopIconMoreContainer').animate({'height':'456px'});
            $('#topIconMore').addClass('active');

    }

    else{

        $('#sideUITopIconMoreContainer').animate({'height':'0'}, function(){

                $('#sideUITopIconMoreContainer').hide();
                $('#topIconMore').removeClass('active');

        }); 
    }

});

感谢任何和所有帮助。谢谢！

jQuery - 自定义<select>下拉菜单</select>

0 个答案: