Javascript 我想为下拉菜单重新格式化css和jquery代码_Javascript_Jquery_Html_Css

Javascript 我想为下拉菜单重新格式化css和jquery代码

javascript jquery html css

Javascript 我想为下拉菜单重新格式化css和jquery代码,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下代码的下拉菜单工作良好但是我需要修改css和jquery 需要增加主框并减少第一个图标行但是当我尝试减小宽度时，它是减小整个框的宽度请导游。小提琴连杆 http://fiddle.jshell.net/6pLPn/ 代码： JQUERY演示 $（函数（）{ //可点击下拉列表 $（'.单击nav>ul'）.toggleClass（'no-js'）； $（'.click nav.js ul'）.hide（）； $（'.click nav.js'）。

我有以下代码的下拉菜单工作良好但是我需要修改css和jquery

需要增加主框并减少第一个图标行

但是当

我尝试减小宽度时，它是减小整个框的宽度

请导游。
小提琴连杆
http://fiddle.jshell.net/6pLPn/


代码：


JQUERY演示














$（函数（）{
//可点击下拉列表
$（'.单击nav>ul'）.toggleClass（'no-js'）；
$（'.click nav.js ul'）.hide（）；
$（'.click nav.js'）。单击（函数（e）{
$（'.单击nav.js ul'）。滑动切换（200）；
$（'.clicker'）。toggleClass（'active'）；
e、 停止传播（）；
});
$（文档）。单击（函数（）{
如果（$（'.click nav.js ul'）。是（':visible'））{
$（'.click nav.js ul'，this.slideUp（）；
$（'.clicker'）.removeClass（'active'）；
}
});
});
此处所有内容的宽度都在容器div上设置。
CSS中定义的宽度为200px的

这就是你的意思吗？很难确切地理解问题所在。非常感谢我所需要的，很抱歉错过了对话。但当我点击相同的第一行时，它只会缩小宽度，然后它也在扩展。需要减少第1列的长度以及它在该部分上的长度。单击“展开菜单”应该可以工作。实际上，您的小提琴中没有包含jQuery库，所以它会退回到非js版本，即悬停显示菜单。我已经将jQuery库添加到更新的fiddle中。如果你看一下，你能解释一下问题是什么吗？
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

    </head>
    <body>
        <div class="header">
            <div class="logo">
            JQUERY DEMO
            </div>
            <ul class="nav">
                <li class="nav-link">

                </li>
            </ul>
        </div>

        <!-- Clickable Nav -->
        <div class="click-nav">
            <ul class="no-js">
                <li>
                    <a class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
                    <ul>
                        <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
                        <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
                        <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
                        <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
                        <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /Clickable Nav -->

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
        $(function() {
            // Clickable Dropdown
            $('.click-nav > ul').toggleClass('no-js js');
            $('.click-nav .js ul').hide();
            $('.click-nav .js').click(function(e) {
                $('.click-nav .js ul').slideToggle(200);
                $('.clicker').toggleClass('active');
                e.stopPropagation();
            });
            $(document).click(function() {
                if ($('.click-nav .js ul').is(':visible')) {
                    $('.click-nav .js ul', this).slideUp();
                    $('.clicker').removeClass('active');
                }
            });
        });
        </script>




    </body>
</html>

.clicker {
    width: 100px; /* or use a percentage like 50% */
}

.click-nav ul li ul {
    width: 250px; /* or use a percentage like 125% */
}