0

I have probably very simple question.

I have copied that code to my asp.net web application project but i couln't minimize the box.

Is there anything special i should do to use javascript with asp.net projects?

I tried the code tree times.

  1. Put script code in to head block
  2. Put script code to just before div starts
  3. Put script code to just before form tag closes

Javascript code

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

html code

<div id="widnow">
    <div id="title_bar"> Basic information
        <div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
    </div>
    <div id="box">
    </div>
</div>

css code 

#widnow{
    width:400px;
    border:solid 1px;
}

#title_bar{
    background: #FEFEFE;
    height: 25px;
    width: 100%;
}
#button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
#box{
    height: 250px;
    background: #DFDFDF;
}
4

2 回答 2

2

我假设您缺少对 jquery 的引用。如果是这样的话，用这个替换你的脚本部分将解决问题。

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});
</script>
于 2013-09-23T08:46:58.310 回答
1

很可能您缺少 jquery 文件....试试这个

<html>
<head runat="server">
    <title></title>
    <style>
        #widnow
        {
            width: 400px;
            border: solid 1px;
        }

        #title_bar
        {
            background: #FEFEFE;
            height: 25px;
            width: 100%;
        }
        #button
        {
            border: solid 1px;
            width: 25px;
            height: 23px;
            float: right;
            cursor: pointer;
        }
        #box
        {
            height: 250px;
            background: #DFDFDF;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#button").click(function () {
                if ($(this).html() == "-") {
                    $(this).html("+");
                }
                else {
                    $(this).html("-");
                }
                $("#box").slideToggle();
            });
        });
    </script>
</head>
<body>
    <div id="widnow">
        <div id="title_bar">
            Basic information
            <div id="button">
                <img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
        </div>
        <div id="box">
        </div>
    </div>
</body>
</html>
于 2013-09-23T08:48:38.310 回答