show hide 새창에서도 유지할 수 있는 방안 있을까요?
본문
<li id="test1">
<span class="qa2" style="width:100%; height:30px;">
내용
</span>
</li>
<li class="testP" onclick="link1()" style="display:none;">
내용
</li>
<li id="test2" style="display:none;">
<span class="qa2" style="width:100%; height:30px;background:#fff; color:#000;">
닫기
</span>
</li>
$("#test1").click(function(){
$('.testP').show();
$('#test2').show();
});
$("#test2").click(function(){
$('.testP').hide();
$('#test2').hide();
});
위와 같이 버튼 클릭으로 show hide를 나타내고 있습니다.
window.location.href = ~~~~;
이렇게 해서 새창으로 나오게 하면 show() hdie() 했던것이 풀려 있습니다.
이 부분은 당연한 것이지만 새창에서도 유지할 수 있는 방안이 없을까요?
그리고 현재는 닫기 버튼을 눌러야 닫히는데 내용 부분 이외에 밖에 부분 클릭시 자동으로 닫히게 할 방안이 있을까요?
답변 1
단순 페이지의 상태저장을 위해 cookie 또는 Storage 객체를 활용해 볼수 있고
다음은 sessionStorage 와 jQuery on Event Handler 로 제어하는 예제 입니다.
<ul id="test">
<li id="test1">
<span class="qa2" style="width:100%; height:30px;">
내용
</span>
</li>
<li class="testP" onclick="link1()" style="display:none;">
내용
</li>
<li id="test2" style="display:none;">
<span class="qa2" style="width:100%; height:30px;background:#fff; color:#000;">
닫기
</span>
</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$("#test1").click(function(){
$('.testP').show();
$('#test2').show();
window.sessionStorage.setItem('#test1', '1');
});
$("#test2").click(function(){
$('.testP').hide();
$('#test2').hide();
window.sessionStorage.removeItem('#test1');
});
function link1() {
window.location.href = location.href;
}
window.addEventListener('DOMContentLoaded', function () {
if (window.sessionStorage.getItem('#test1') == '1') {
$("#test1").click();
}
$('body').on('click', function (evt) {
var el = evt.target;
if ($('#test').has($(el)).length == 0) {
$("#test2").click();
}
});
});
</script>
참고가 많이 되었습니다.
어제 의뢰드리고 오늘 자체 수정을 하였습니다.
<?php
$basename=($_SERVER[ "REQUEST_URI" ]);
/*echo "<script>alert('{$basename}');</script>";*/
if ( strpos($basename, "wr_9") !== false ){
echo "<script>$('.testP').show();</script>";
echo "<script>$('#test2').show();</script>";
}
if ( strpos($basename, "wr_10") !== false ){
echo "<script>$('.testP1').show();</script>";
echo "<script>$('#test4').show();</script>";
}
if ( strpos($basename, "wr_7") !== false ){
echo "<script>$('.testP2').show();</script>";
echo "<script>$('#test6').show();</script>";
}
?>
저는 이렇게 해서 주소에서 여분필드 값 찾아내서 show()/hide() 주었습니다.
쉽게 가는 법을 잘 몰라서 노가다성으로 주소에서 값을 찾아서 주었습니다.
