Question

侧边栏被隐藏，一旦我提交了正确的针脚，它就会淡出。但是，当我单击侧边栏中的任何选项时，它会隐藏多次！为什么？

var pin = 1234; 

$("#confirm_pin").click(function () {
    var pin = document.getElementById("Pin").value;

    if (pin == 1234) {
        alert("You have now acesss!");

        $(".management").hide();
        $(".management_sidebar").fadeIn();

    } else {
        alert("Please, enter the correct pin");
    }
});

    $(".option_management").on("click", function () {

            $(".page_holder_management").children().hide();

            var option = $.trim($(this).text());
            var find_click_object = $(this).attr("id");


            if (option == "Home page") {
                $("div.page_holder_management > div:nth-child(1)").fadeIn();
            } else {
                alert("false");
            }
    });

HTML

<div class="management_sidebar" style="display:none;"> 
    <div class="header_management_sidebar"> 
        <p style="position:absolute; margin:10px; font-weight:bold;">  Site administration  </p> 
    </div>
    <div id="management_content" STYLE="margin:20px; color:black;">
        <div class="box_management"> 
            <div class="option_management" id="1">Home page</div>
            <div class="option_management" id="2">Table page</div>
            <div class="option_management"> test </div>
            <div class="option_management"> test </div>
        </div>
    </div>
</div>

<div class="page_holder_management">

    <div class="management_homePage" style="display:none;"> 
        <div class="header_management_homePage"> 
                <p style="position:absolute; margin:10px; color:black; font-weight:bold;">  Change home page  </p> 
        </div>
    </div>

    <div class="management_tablePage" style="display:none;"> 
        <div class="header_management_homePage"> 
                <p style="position:absolute; margin:10px; color:black; font-weight:bold;">  Change table page  </p> 
        </div>
    </div>

</div>

在html代码中，当我点击侧边栏中的任何选项时我创建了应该淡入的页面，当我点击另一个选项时，它应该fadeOut，而另一个页面应该淡入！

请告诉我我做错了什么？

请检查此http://kapten.mzzhost.com/test/System_management.php以测试我的问题！引脚为：1234

Answer 1

Check the fiddle，你应该使html和js关系更简单。我在那里使用了数据属性，如果我理解正确，这就是你想要的

 var pin = 1234; 

$("#confirm_pin").click(function () {
var pin = document.getElementById("Pin").value;

if (pin == 1234) {
    alert("You have now acesss!");

    $(".management").hide();
    $(".management_sidebar").fadeIn();

 } else {
     alert("Please, enter the correct pin");
 }
});

$(".option_management").on("click", function () {
    var target = $(this).data('target');
    $('.contents').hide();
    $('.contents.' + target).fadeIn();        
});

html使用数据属性进行更改

 <div class="option_management" data-target="management_homePage" id="1">Home page</div>
 <div class="option_management" data-target="management_tablePage" id="2">Table page</div>

为什么我的侧边栏在第二次点击后每次都隐藏？

1 个答案: