Как изменить тип отображения на inline-элемент в моем случае?

0

У меня странная проблема с отображением встроенного блока

У меня есть следующие коды

 <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

left-nav и right-nav превращаются в блок-элемент вместо встроенного элемента.

Я не уверен, как решить эту проблему. Может кто-нибудь мне помочь?

благодаря

  • 0
    Добавить скрипку здесь jsfiddle.net

3 ответа

0

Связанный контент " left-nav " в div может быть установлен в качестве " content ", после чего он влияет на .toggle() с содержимым. $('#left-nav').toggle('slow'); С другими div такие же, как и выше. .toggle() изменит атрибут " display " селектора по блоку (я так думаю ^^!)

0

В вашем случае, когда js использует toggle для отображения элементов, style="display:block" добавляются в элементы, как показано ниже:

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

Он охватывает display: inline элементов display: inline который в вашем файле CSS. Ваш макет сломан. Если вы хотите показать или скрыть весь раздел, вы можете переключать секцию вместо "left-nav", "list" и "right-nav". Посмотрите на изменение, как показано ниже:

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

Вы также должны предоставить display: inline-block; к изображению, поскольку поведение по-умолчанию по-разному работает. Если вы определяете свойство для тега изображения, оно работает только так, как вы ожидали.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню