안녕하세요 아래 링크를 만지작 중인데요
https://stove99.tistory.com/103
1번2번 ul는 무조건 클릭안해도 노출하게 할수있는 스크립트를 짜야하는데 방법좀 알려주시면 감사하겠습니다 ㅠㅠ
html은 안건드리고 스크립트 부분에서요
Copy
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>답변 3개 / 댓글 6개
채택된 답변
+20 포인트
<ul class="hide"> 이걸로 모두 닫기 되어있자나요
보여줄 곳에선 hide가 없어야겟죠?
while로 반복문 쓰셧네요
원하는 순서에 hide가 안되어있으면 될거 같네요
php나 자바스크립트로 원하시는 펼침을 찾으셔서 hide를 날려주세요
답변에 대한 댓글 4개
php나 자바스크립트를 아셔야 해요
현 반복문은 php로 돌리셨자나요
php로 예를 들자면
그럼 임이의 변수 $i 라고 지정했을때
$i = 0 ; 으로 지정하시고 while 문 끝나기 전에 1증가를 하는거죠 $i++;
처음 반복문에선 $i값이 0이고 반복문 돌고나면 $i값은 1이고 점점 증가하게 됩니다.
if 문을 사용해서 처음과 두번째에 조건문넣으시고 나머지는 이래 되라 라고 명령어 만들면 될거 같네요
if($i==0 || $i == 1){
echo '<ul>';
} else {
echo '<ul class="hide">';
}
이해만 하도록 작성한것이니 응용해보세요
현 반복문은 php로 돌리셨자나요
php로 예를 들자면
그럼 임이의 변수 $i 라고 지정했을때
$i = 0 ; 으로 지정하시고 while 문 끝나기 전에 1증가를 하는거죠 $i++;
처음 반복문에선 $i값이 0이고 반복문 돌고나면 $i값은 1이고 점점 증가하게 됩니다.
if 문을 사용해서 처음과 두번째에 조건문넣으시고 나머지는 이래 되라 라고 명령어 만들면 될거 같네요
if($i==0 || $i == 1){
echo '<ul>';
} else {
echo '<ul class="hide">';
}
이해만 하도록 작성한것이니 응용해보세요
답변에 대한 댓글 1개
제가 적용한 소스인데 여기에서는 닫혀있는데 어느부분을 수정해야할까요
<form action="./list.php" method="GET">
<div class="s_menu">
<div class="s_menu_option" style="border-bottom:#ffffff 0px solid;border-left: 1px solid #b6bdc7;border-right: 1px solid #b6bdc7;">
<?
// if( $_GET['qcaid'] ){
// $c1 = substr($_GET['qcaid'],0,2);
// $c2 = substr($_GET['qcaid'],2,2);
// }
//쿼리
$sql = "
SELECT
*
FROM
g5_cate_box
WHERE
cg_id='".$c1."' AND cg_id2='".$c2."'
ORDER BY
IF(cg_idx=0,0,cg_idx) ASC, cg_num asc
";
//if( $_SERVER["REMOTE_ADDR"] == "49.167.72.194" ){
// echo "<pre>".$sql."</pre>";
// echo "<br>";
//}
//echo "<pre>".$sql."</pre>";
$query = sql_query($sql);
//검색항목 문자 변환
$qs_str = '';
if( is_array($_GET['qs'])==true ){
$qs_str = implode('@',$_GET['qs']);
$qs_str = '@@'.$qs_str.'@';
}
while($row=sql_fetch_array($query)){
?>
<div class="menu_option">
<ul>
<li class="menu">
<a> <h4><span><?=$row['cg_title']?></span></h4></a>
<ul class="hide">
<?
//속성값 구분자를 통해 표시
$array = explode('@',$row['cg_spec']);
$total = count($array);
for($i=0;$i<$total;$i++){
?>
<?if( $array[$i] ){?>
<li >
<input type="checkbox" name="qs[]" <?if( strpos($qs_str,'@'.$array[$i].'@')>0 )echo'checked';?> value="<?=$array[$i]?>"/>
<span class="cname"><?=$array[$i]?></span><span class="cnt"></span>
</li>
<?}else{?>
<li></li>
<?}?>
<?
}
?>
</ul>
</li>
</ul>
</div>
<?
}
?>
</div>
</div>
<form action="./list.php" method="GET">
<div class="s_menu">
<div class="s_menu_option" style="border-bottom:#ffffff 0px solid;border-left: 1px solid #b6bdc7;border-right: 1px solid #b6bdc7;">
<?
// if( $_GET['qcaid'] ){
// $c1 = substr($_GET['qcaid'],0,2);
// $c2 = substr($_GET['qcaid'],2,2);
// }
//쿼리
$sql = "
SELECT
*
FROM
g5_cate_box
WHERE
cg_id='".$c1."' AND cg_id2='".$c2."'
ORDER BY
IF(cg_idx=0,0,cg_idx) ASC, cg_num asc
";
//if( $_SERVER["REMOTE_ADDR"] == "49.167.72.194" ){
// echo "<pre>".$sql."</pre>";
// echo "<br>";
//}
//echo "<pre>".$sql."</pre>";
$query = sql_query($sql);
//검색항목 문자 변환
$qs_str = '';
if( is_array($_GET['qs'])==true ){
$qs_str = implode('@',$_GET['qs']);
$qs_str = '@@'.$qs_str.'@';
}
while($row=sql_fetch_array($query)){
?>
<div class="menu_option">
<ul>
<li class="menu">
<a> <h4><span><?=$row['cg_title']?></span></h4></a>
<ul class="hide">
<?
//속성값 구분자를 통해 표시
$array = explode('@',$row['cg_spec']);
$total = count($array);
for($i=0;$i<$total;$i++){
?>
<?if( $array[$i] ){?>
<li >
<input type="checkbox" name="qs[]" <?if( strpos($qs_str,'@'.$array[$i].'@')>0 )echo'checked';?> value="<?=$array[$i]?>"/>
<span class="cname"><?=$array[$i]?></span><span class="cnt"></span>
</li>
<?}else{?>
<li></li>
<?}?>
<?
}
?>
</ul>
</li>
</ul>
</div>
<?
}
?>
</div>
</div>
예제 페이지에 나온대로 구성하면 펼쳐져 있는것 아닌가요?
Copy
<script src="http://code.jquery.com/jquery.min.js"></script>?
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
<div>
<ul>
<li class="menu">
<a><img src="" alt="상위메뉴이미지1"/></a>
<ul class="hide">
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
<li>메뉴1-4</li>
<li>메뉴1-5</li>
<li>메뉴1-6</li>
</ul>
</li>
<li class="menu">
<a><img src="" alt="상위메뉴이미지2"/></a>
<ul class="hide">
<li>메뉴2-1</li>
<li>메뉴2-2</li>
<li>메뉴2-3</li>
<li>메뉴2-4</li>
<li>메뉴2-5</li>
<li>메뉴2-6</li>
</ul>
</li>
</ul>
</div>답변을 작성하려면 로그인이 필요합니다.
제가 초보라 첫번째 두번째만 class="hide" 적용안되게 그외에는 다 class="hide" 적용되게 하는방법은 없을까요 ㅠㅠ?