테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

메뉴를 클릭해서 서브 메뉴가 나올씨 윗 머리 제목이 백그라운드 이미지를 씌으고 싶습니다;

shwan8969 8년 전 조회 2,189
답변 1
목록

메뉴를 클릭해서 서브 메뉴가 나올씨 윗 h2 제목이 백그라운드 이미지를 씌으고 싶습니다;

근데 잘 안됩니다.. 슬라이드 다운이 됬을때 백그라운드 이미지를 씌우고 슬라이드 업 될시 백그라운드 이미지가 사라지게 하고싶습니다; 어케해야 하나요 ㅜㅜ

html은 이것입니다.

                   
                           
  •                            

    센터 소개

                                                        
    •                        
  •                            

    서비스 안내

                                                        
    •                        
  •                            

    참여마당

                                                        
    •                        
  •                            

    범죄피해와 트라우마

                                                        
    •                    
               

 

 

$(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;     });  

});

##자바스크립트 ##html5 ##css ##야근 ##혼자
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

배
배르만
8년 전

</p>

<p><!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <script type="text/javascript" src="<a href="http://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js"></script></a>

    <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);</p>

<p>            $(this).find("h2").css({ "background": "url(<a href="https://lh3.googleusercontent.com/proxy/aBx9cYTj2F9Qn5qqTFz4OYXZ0xJq8TfOp1p0AECLGX_wnqQYL7MAYhmDpqT6xa-aocbXpsEVgwopB-8ge35_jio0GA=w530-h298-n)" target="_blank" rel="noopener noreferrer">https://lh3.googleusercontent.com/proxy/aBx9cYTj2F9Qn5qqTFz4OYXZ0xJq8TfOp1p0AECLGX_wnqQYL7MAYhmDpqT6xa-aocbXpsEVgwopB-8ge35_jio0GA=w530-h298-n)</a> no-repeat left center" });</p>

<p>            var other = $("#mnb > li > a").not(this);

            other.find("h2").css({"background": "none"});

            other.next().slideUp(300);</p>

<p>            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></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인