Question

我在jquery中打开一个菜单我希望默认状态是关闭但它不起作用它只在我进行div显示时起作用：在开头阻止但我希望关闭开始状态

html：

<div class="menu">
    <div>
        <div class="menu_header" id="A1" status="close"><a href="#"><img src="img/insert.jpg" id="B1" alt="" align="left" />header</a></div>
        <div  class="menu_body" style="display:none;" id="A11"><a href="#">samy</a></div>
    </div>
</div>

jquery：

<script type="text/javascript">
    $(document).ready(function () {
        /*click function starts here*/
        $('.menu_header').click(function () {
            var s = $(this).attr('id');
            var divid = $("#" + s + "1").attr('id');
            var imgid = $("#" + s + " a img").attr('id');
            var imgsrc = $("#" + imgid + "").attr('src');
var status = $(this).attr('status');
            if (status == "close") {
                $("#" + imgid + "").attr('src', 'img/remove.jpg');
                $(this).attr('status', 'open');
                $("#" + divid).attr("style", "display: block !important");
                $(this).attr('status', 'open');
                $("#" + s + "1").slideDown(800);


            }
            else if (status == "open") {
                $("#" + imgid + "").attr('src', 'img/insert.jpg');
                $("#" + imgid + "").css('display', 'none');
                $("#" + divid).attr("style", "display: block !important");
                $(this).attr('status', 'close');
                $("#" + s + "1").slideUp(800);

            }

        });
    });
</script>

css：

.menu{width:300px;margin-top:1px;height:auto;}
.menu_header a{color:#faf6e0;padding-top:8px;height:40px;width:100%;display:block;padding-left:10px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #548975), color-stop(1, #37705a));background:-moz-linear-gradient(top, #548975 5%, #37705a 100%);background:-webkit-linear-gradient(top, #548975 5%, #37705a 100%);background:-o-linear-gradient(top, #548975 5%, #37705a 100%);background:-ms-linear-gradient(top, #548975 5%, #37705a 100%);background:linear-gradient(to bottom, #548975 5%, #37705a 100%);}
.menu_header img{margin:1px;}
.menu_header a:hover{cursor:point;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #37705a), color-stop(1, #548975));background:-moz-linear-gradient(top, #37705a 5%, #548975 100%);background:-webkit-linear-gradient(top, #37705a 5%, #548975 100%);background:-o-linear-gradient(top, #37705a 5%, #548975 100%);background:-ms-linear-gradient(top, #37705a 5%, #548975 100%);background:linear-gradient(to bottom, #37705a 5%, #548975 100%);}
.menu_body a{padding-top:1px;padding-left:10px;margin-top:1px;margin-bottom:1px;color:#5f5f5f;vertical-align:middle;height:30px;width:100%;background: #faf6e0 ;border:1px #d9c074 solid; cursor:pointer !important;}
.menu_body a:hover{background: #e7d6a1; color:#5f5f5f;border-left: 5px #e86a6a solid;padding-left:15px; cursor:pointer;}

因为我想尽快得到帮助

Answer 1

试试这个JS，让我知道是否有效。

这是小提琴：http://jsfiddle.net/bw5Luug4/

<script type="text/javascript">
    $(document).ready(function () {
        /*click function starts here*/
        $('.menu_header').click(function () {
            var s = $(this).attr('id');
            var divid = $("#" + s + "1").attr('id');
            var imgid = $("#" + s + " a img").attr('id');
            var imgsrc = $("#" + imgid + "").attr('src');
            var status = $(this).attr('status');

            if (status == "close") {
                $("#" + imgid + "").attr('src', 'img/remove.jpg');
                $(this).attr('status', 'open'); 
                $("#" + s + "1").slideDown(800); 

            }
            else if (status == "open") {
                $("#" + imgid + "").attr('src', 'img/insert.jpg'); 
                $(this).attr('status', 'close');
                 $("#" + s + "1").slideUp(800);
            }

        });
    });
</script>

jquery向上滑动菜单asp.net

1 个答案: