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

How to change display type to inline-element in my case?

本文关键字：类型 元素 显示 案例 我的      更新时间：2024-01-06

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

我有以下代码

 <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>

css。

#container{
    width: 970px;
    height: 1px;
        padding: 5px;
    line-height: 190px;        
}
section #list {
    display: inline-block;
    display: none;  //I want to hide it when page first loads
}
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;
    display: none;  //I want to hide it when page first loads
}
section #right-nav{
    display:inline-block;
    line-height: 120px;
    vertical-align: middle;
    display: none;  //I want to hide it when page first loads
}

我想显示如下：

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

CCD_ 1和CCD_。

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

感谢

在一个div中绑定"left-nav"的内容，可以将其类设置为"content"，然后用内容影响.toggle()。$('#left-nav').toggle('slow');其他div和上面的想法一样。.toggle()函数将按块更改选择器的"display"属性（我认为是^^！）

您还应该为图像提供display: inline-block;，因为它的默认行为是不同的。如果您为image标记定义了属性，则只能按预期工作。

在这种情况下，当js使用toggle来显示元素时，left-nav0被添加到元素中，如下所示：

    <div id='left-nav' style="display:block">

它涵盖了CSS文件中的display: inline项。您的布局已损坏。如果你想显示或隐藏整个部分，你可以切换该部分，而不是"左导航"、"列表"answers"右导航"。请看下面的变化：

<!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>
相关文章：