У меня странная проблема с отображением встроенного блока
У меня есть следующие коды
<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
превращаются в блок-элемент вместо встроенного элемента.
Я не уверен, как решить эту проблему. Может кто-нибудь мне помочь?
благодаря
Связанный контент " left-nav
" в div может быть установлен в качестве " content
", после чего он влияет на .toggle()
с содержимым. $('#left-nav').toggle('slow');
С другими div такие же, как и выше. .toggle()
изменит атрибут " display
" селектора по блоку (я так думаю ^^!)
В вашем случае, когда 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>
Вы также должны предоставить display: inline-block;
к изображению, поскольку поведение по-умолчанию по-разному работает. Если вы определяете свойство для тега изображения, оно работает только так, как вы ожидали.