메뉴를 클릭해서 서브 메뉴가 나올씨 윗 머리 제목이 백그라운드 이미지를 씌으고 싶습니다;
본문
메뉴를 클릭해서 서브 메뉴가 나올씨 윗 h2 제목이 백그라운드 이미지를 씌으고 싶습니다;
근데 잘 안됩니다.. 슬라이드 다운이 됬을때 백그라운드 이미지를 씌우고 슬라이드 업 될시 백그라운드 이미지가 사라지게 하고싶습니다; 어케해야 하나요 ㅜㅜ
html은 이것입니다.
<div class="m_h">
<ul id="mnb">
<li class="">
<a href="javascript:click()"><h2>센터 소개</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 설립 배경 및 현황</li>
<li>- 사업 내용</li>
<li>- 조직 구성</li>
<li>- 전국 스마일센터</li>
<li>- 관련기관</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>서비스 안내</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 스마일센터가 하는 일</li>
<li>- 이용안내</li>
<li>- 서비스 신청</li>
<li>- FAQ</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>참여마당</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 공지사항</li>
<li>- 자료실</li>
<li>- 갤러리</li>
<li>- 소식지</li>
<li>- 서비스 문의</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>범죄피해와 트라우마</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 범죄피해의 이해</li>
<li>- 트라우마와 PTSD</li>
<li>- 피해 직후 가이드</li>
<li>- 자가진단</li>
</ul>
</div>
</li>
</ul>
</div>
$(document).ready(function () {
// $("ul > li:first-child a").next().show();
$("#mnb > li > a").click(function () {
$(this).next().slideToggle(300);
//$(".act").$(this).css({ "background": "url(./img6/m_rainbow.jpg) no-repeat" });
$("#mnb > li > a").not(this).next().slideUp(300);
return true;
});
});
답변 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// $("ul > li:first-child a").next().show();
$("#mnb > li > a").click(function () {
$(this).next().slideToggle(300);
//$(".act").$(this).css({ "background": "url(./img6/m_rainbow.jpg) no-repeat" });
// $("#mnb > li > a").not(this).next().slideUp(300);
$(this).find("h2").css({ "background": "url(https://lh3.googleusercontent.com/proxy/aBx9cYTj2F9Qn5qqTFz4OYXZ0xJq8TfOp1p0AECLGX_wnqQYL7MAYhmDpqT6xa-aocbXpsEVgwopB-8ge35_jio0GA=w530-h298-n) no-repeat left center" });
var other = $("#mnb > li > a").not(this);
other.find("h2").css({"background": "none"});
other.next().slideUp(300);
return true;
});
});
</script>
</head>
<body>
<div class="m_h">
<ul id="mnb">
<li class="">
<a href="javascript:click()"><h2>센터 소개</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 설립 배경 및 현황</li>
<li>- 사업 내용</li>
<li>- 조직 구성</li>
<li>- 전국 스마일센터</li>
<li>- 관련기관</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>서비스 안내</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 스마일센터가 하는 일</li>
<li>- 이용안내</li>
<li>- 서비스 신청</li>
<li>- FAQ</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>참여마당</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 공지사항</li>
<li>- 자료실</li>
<li>- 갤러리</li>
<li>- 소식지</li>
<li>- 서비스 문의</li>
</ul>
</div>
</li>
<li class="">
<a href="javascript:click()"><h2>범죄피해와 트라우마</h2><img src="./img6/m_up.png" class="m_up" /></a>
<div class="subnav" style="display:none; overflow:hidden;">
<ul>
<li>- 범죄피해의 이해</li>
<li>- 트라우마와 PTSD</li>
<li>- 피해 직후 가이드</li>
<li>- 자가진단</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
