Question

当我单击Button1时，Panel1被隐藏，所有按钮的功能都相同。但当我隐藏Panel1时，Panel2被移动到Panel1的位置，我想要在它所在的位置。请帮助我

<head>
    <title>JQuery Event Listener</title>

    <script src = "jquery-3.0.0.js"></script>

    <style>
        header {
            background-color: gray;
            text-align: center;
        }

        main {
            padding-left: 39%;
            position: relative;
        }           

        .panel {
            display: inline-block;
        }

        .panel-Heading {
            background-color: blue;
            width: 60px;
            padding: 5px;
            border: 1px groove;
        }

        .panel-Body { 
            width: 60px;
            padding: 5px;
            border: 1px solid; 
        }
    </style>

</head>

<body>
    <header>
        <br>
        <h1>Let's Have Fun!</h1> 
        <button id = "btn1" data-panel="1">Button1</button>
        <button id = "btn2" data-panel="2">Button2</button>
        <button id = "btn3" data-panel="3">Button3</button>
        <button id = "btn4" data-panel="4">Button4</button>
        <br><br>
    </header>

    <br><br>

    <main>
        <div id="panel1" class="panel">    
            <div class = "panel-Heading">Panel1</div>
            <div class = "panel-Body">Content</div>
        </div>      

        <div id="panel2" class="panel">
            <div  class = "panel-Heading">Panel2</div>
            <div class = "panel-Body">Content</div>
        </div>      

        <div id="panel3" class="panel">
            <div  class = "panel-Heading">Panel3</div>
            <div  class = "panel-Body">Content</div>
        </div>      

        <div id="panel4" class="panel">
            <div  class = "panel-Heading">Panel4</div>
            <div  class = "panel-Body">Content</div>
        </div>      
    </main>
    <script>
        $(function(){

            $("#btn1").on('click', function() {
                $("#panel1").fadeToggle();
            });

            $("#btn2").on('click', function() {
                $("#panel2").fadeToggle();
            });

            $("#btn3").on('click', function() {
                $("#panel3").fadeToggle();
            });

            $("#btn4").on('click', function() {
                $("#panel4").fadeToggle();
            });

        });
    </script>
</body>

Answer 1

将width: 60px;添加到.panel班级：

.panel {
    display: inline-block;
    width: 60px;
}

...然后将你想要隐藏的div嵌入其中：

<div class="panel">
    <div id="panel1">    
        <div class = "panel-Heading">Panel1</div>
        <div class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel2">
        <div  class = "panel-Heading">Panel2</div>
        <div class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel3">
        <div  class = "panel-Heading">Panel3</div>
        <div  class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel4">
        <div  class = "panel-Heading">Panel4</div>
        <div  class = "panel-Body">Content</div>
    </div>     
</div>

这会导致嵌套div在单击按钮时消失，而外部div保留在原位以保留空间。

此外，由于您的JavaScript低于它将影响的元素，因此您无需等待文档准备就绪。您还编写了比您需要的更多的点击处理程序。您可以将以下所有JavaScript交换出来：

$(".panel").on('click', function() {
    $(this).children().first().fadeToggle();        
});

Answer 2

试试这个

var settingPath = Path.GetFullPath(Path.Combine(@"../../appsettings.json")); // get absolute path
var builder = new ConfigurationBuilder()
        .SetBasePath(env.ContentRootPath)
        .AddJsonFile(settingPath);

$(function(){

            $("#btn1").on('click', function() {
                $("#panel1").fadeToggle();
            });

            $("#btn2").on('click', function() {
                $("#panel2").fadeToggle();
            });

            $("#btn3").on('click', function() {
                $("#panel3").fadeToggle();
            });

            $("#btn4").on('click', function() {
                $("#panel4").fadeToggle();
            });

        });

.main {
  width : 100%;
}
.main .panel-container{
  display: inline-block;
  width : 24% !important;
}

header {
            background-color: gray;
            text-align: center;
        }

        main {
            padding-left: 39%;
            position: relative;
        }           

        .panel {
            display: inline-block;
        }

        .panel-Heading {
            background-color: blue;
            width: 60px;
            padding: 5px;
            border: 1px groove;
        }

        .panel-Body { 
            width: 60px;
            padding: 5px;
            border: 1px solid; 
        }

当我隐藏前一个面板时，下一个面板向左移动到前一个面板，我希望它在那里，因为它是

2 个答案: