Javascript 在我的例子中，如何将显示类型更改为内联元素？_Javascript_Jquery_Html_Css

Javascript 在我的例子中，如何将显示类型更改为内联元素？

javascript jquery html css

Javascript 在我的例子中，如何将显示类型更改为内联元素？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的内联块显示有一个奇怪的问题我有以下代码 <section id='container'> <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div> <ul id='list'> <li><img src='images/slide1.png'

我的内联块显示有一个奇怪的问题

我有以下代码

 <section id='container'>
        <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
        <ul id='list'>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>
        </ul>
        <div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a></div>
 </section>

我希望显示如下所示：

left-nav    slide1 slide2 slide3 slide4 slide5    right-nav

如果我不隐藏左导航和右导航，看起来很好。但是，我的意图是在默认情况下隐藏整个部分，并在用户单击按钮时显示它们

我使用下面的js

 $('#btn').on('click', function(){
       var height = $('#container').height();
       if(height>10){
           $('#container').height(1);
       }else{
           $('#container').height(190);
       }

       $('#list').toggle('slow');
       $('#left-nav').toggle('slow');
       $('#right-nav').toggle('slow');
})

然而，它变成了这样

left-nav    
slide1 slide2 slide3 slide4 slide5    
right-nav

左导航

和

右导航

转到块元素而不是内联元素

我不知道如何解决这个问题。有人能帮我吗

感谢

在div中绑定“

左导航

”的内容，可以将其类设置为“

内容

”，然后影响内容。

$（'#左导航'）。切换（'slow'）
与其他div相同，与上述想法相同。
.toggle（）
函数将按块更改选择器的“显示
”属性（我想是的^^！）
您还应该提供显示：内联块，因为图像的默认行为是不同的。如果您为图像标记定义属性，则只能按预期工作。
在您的情况下，当js使用toggle显示元素时，会将style=“display:block”
添加到元素中，如下所示：
    <div id='left-nav' style="display:block">

<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    #container{
      width: 970px;
      height: 1px;
      padding: 5px;
      line-height: 190px;  
      display: none;      
    }

    section #list {
        display: inline-block;
    }

    section #list li{
        display: inline-block;
        width: 162px;
        height: 142px;
        background-color: grey;
        line-height: 170px;
        vertical-align: middle;
        margin: 6px;
    }

    section #left-nav{
        display:inline-block;
        line-height: 120px;
        vertical-align: middle;
    }
    section #right-nav{
        display:inline-block;
        line-height: 120px;
        vertical-align: middle;
    }
  </style>
</head>
<body>
  <section id='container'>
        <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
        <ul id='list'>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>
        </ul>
        <div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a></div>
 </section>

 <div>
   <button id="btn">button</button>
 </div>

  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script>
    $('#btn').on('click', function(){
       var height = $('#container').height();
       if(height>10){
           $('#container').height(1);
       }else{
           $('#container').height(190);
       }

       $('#container').toggle('slow');
    });
  </script>
</body>

把小提琴加在这里
<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    #container{
      width: 970px;
      height: 1px;
      padding: 5px;
      line-height: 190px;  
      display: none;      
    }

    section #list {
        display: inline-block;
    }

    section #list li{
        display: inline-block;
        width: 162px;
        height: 142px;
        background-color: grey;
        line-height: 170px;
        vertical-align: middle;
        margin: 6px;
    }

    section #left-nav{
        display:inline-block;
        line-height: 120px;
        vertical-align: middle;
    }
    section #right-nav{
        display:inline-block;
        line-height: 120px;
        vertical-align: middle;
    }
  </style>
</head>
<body>
  <section id='container'>
        <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
        <ul id='list'>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>
        </ul>
        <div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a></div>
 </section>

 <div>
   <button id="btn">button</button>
 </div>

  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script>
    $('#btn').on('click', function(){
       var height = $('#container').height();
       if(height>10){
           $('#container').height(1);
       }else{
           $('#container').height(190);
       }

       $('#container').toggle('slow');
    });
  </script>
</body>