Div макет с использованием Javascript

Div макет, используя JavascriptDiv макет с использованием Javascript

Если я нажимаю на + она должна быть открыта и снова нажмите на - она должна быть близка она работает нормально, но то, что мне нужно, что если есть более DIV как обращаться с ними во время выполнения.

<html> 
<head> 
<script src="jquery-1.7.1.js"></script> 
<script src="script.js"></script> 

<style type="text/css"> 
#widnow{ 
width:100%; 
border:solid 1px; 
    float:left; 
} 

#title_bar{ 
background: #FEFEFE; 
height: 25px; 
width: 100%; 
} 
#button{ 
border:solid 1px; 
width: 25px; 
height: 23px; 
float:right; 
cursor:pointer; 
} 
.box{ 
height: 50%; 
width: 50%; 
background: #DFDFDF; 
float:left; 
} 
#title_bar1{ 
background: #FEFEFE; 
height: 25px; 
width: 100%; 
} 
#button1{ 
border:solid 1px; 
width: 25px; 
height: 23px; 
float:right; 
cursor:pointer; 
} 
.box1{ 
height: 50%; 
width: 50%; 
background:#C0C0C0; 
float:left; 
} 

</style> 
</head> 
<body> 

<div id="widnow"> 

<div class="box" > 
<div id="title_bar"> 

     <div id="button">+</div> 
</div> 
</div> 
<div class="box1"> 
    <div id="title_bar1"> 
      <div id="button1">-</div> 
    </div> 
</div> 
</div> 

</body> 

</html>

script.js

jQuery().ready(function() { 

$("#button").click(function(){ 
if($(this).html() == "-"){ 
    $(this).html("+"); 
    $(".box").css("width","50%"); 
    $(".box1").show(); 

} 
else{ 
    $(this).html("-"); 
    $(".box").css("width","100%"); 
    $(".box1").hide(); 
} 

}); 


     });

Пожалуйста, приходят с идеей, что может помочь мне решить эту проблему.

источник

2012-06-14 Pulkit

Использовать относительные пути/например,

$(this).parent().css("width","50%");

Таким образом, вы всегда ставите поле, содержащее элемент (+/-), который был нажат.

Вам также потребуется адаптировать свой код (/. Box1) /, отображающий/скрывающий код; и, как сказал Пулкит, вы должны использовать классы вместо ids. (Выберите ребенок с классом («Box1») под родителем:

$(this).parent().children("#box1")

источник

2012-06-14 06:25:10 DThought

Попробуйте дать другой идентификатор для каждого элемента сНа, а также дать класс и выполнять функцию JQuery с идентификатором (#) вместо класса (.)

источник

2012-06-14 06:20:29

как я могу дать идентификатор с помощью JavaScript – Pulkit

Не жёстко~d селектор дивы. Таким образом вы можете расширить его за пределы одного div.

использовать что-то вроде этого:

$('button').on('click',function(){ 
    $(this).parent('div').css({'width' : '50%'}); 
});

Example

источник

2012-06-14 06:21:04 xbonez

Может это будет работать для всех DIV, который у меня есть .. – Pulkit

@Pulkit: Да, будем. – xbonez

Div макет с использованием Javascript

ответ

Смежные вопросы