当我隐藏上一个面板时，下一个面板会向左移动到前一个面板的位置，我希望它保持原样

when i hide the previous panel the next panel is moved leftward to the previous one's place and i want it to be there as it was

本文关键字：位置一个我希望下一个上一个隐藏移动左移更新时间：2023-09-26

当我单击按钮1时，面板1被隐藏，所有按钮的功能相同。但是当我隐藏 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>

将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();        
});

试试这个

$(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; 
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <title>JQuery Event Listener</title>
    <script src = "jquery-3.0.0.js"></script>
    <style>
            </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>
  <div class="main">
    <div class="panel-container">
    <div id="panel1" class="panel">    
            <div class = "panel-Heading">Panel1</div>
            <div class = "panel-Body">Content</div>
        </div>  
    </div>
    <div class="panel-container">
    <div id="panel2" class="panel">
            <div  class = "panel-Heading">Panel2</div>
            <div class = "panel-Body">Content</div>
        </div>    
    </div>
    <div class="panel-container">
     <div id="panel3" class="panel">
            <div  class = "panel-Heading">Panel3</div>
            <div  class = "panel-Body">Content</div>
        </div>
    </div>
    <div class="panel-container">
    <div id="panel4" class="panel">
            <div  class = "panel-Heading">Panel4</div>
            <div  class = "panel-Body">Content</div>
        </div>  
    </div>
            
</div>
</body>