모두 대신 div 만 접기/펼치기?

저는 방금 jQuery로 시작한 초보자입니다. 오픈 헬프 데스크 티켓 목록을 표시하는 우리 팀을위한 기본 PHP 응용 프로그램을 만들고 있습니다. 화면의 혼란을 방지하기 위해

, 나는 단지 티켓의 제목을 표시하려면 및 클릭 한 경우, 해당 설명.

여기에 관계없이 내가 클릭 무엇 티켓 이름, 지금 내 코드가 작동

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>Animate my Div</title> 
     <style type="text/css" media="screen"> 
      a {     text-decoration: none;    } 
      #expand {     background-color: #fff;    } 
      #mydiv {     display: none;    } 
     </style> 
     <script src="jquery-1.3.2.js" type="text/javascript"></script> 
     <script type="text/javascript"> $(document).ready(function(){ 
    $("a").click(function(){ $("div").slideToggle(1000);    }); 
      });   </script> 
    </head> 
    <body> 
     <?php 
     $con = mysql_connect("korg", "joe", "bob"); 
     if (!$con) {    die('Could not connect: ' . mysql_error()); } 
     mysql_select_db("wfr11", $con); 
     $result = mysql_query(" select title, description from webcases"); 
     while ($row = mysql_fetch_array($result)) { 
     ?> 
      <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
      <div id="mydiv"><?php echo $row['description']; ?></div> 
     <?php 
     }   mysql_close($con);   ?> 
    </body> 
</html>

내 코드

입니다하지만 열려있는 모든 티켓에 대한 모든 div의를 전개.

이상적으로, 내가 클릭 한 티켓 이름에 대한 설명을 보여주고 싶습니다. 그들 모두는 아닙니다. 가능한가?

도움 주셔서 감사합니다.

출처

2010-11-23 Chris

전적으로 가능, 예. 당신이

첫 번째 문제는 당신이 루프의 ID를 반복하는 것입니다, HTML ID는 고유해야합니다. 거기에 수업을 사용하는 것이 좋습니다. 그리고 개별적으로뿐만 아니라

<?php 
while ($row = mysql_fetch_array($result)) { 
?> 
<div class="entry"> 
    <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
    <div class="description"><?php echo $row['description']; ?></div> 
</div> 
<?php 
} 
?>

처리 할 수있는 결합 된 항목을에 만들기 위해 DIV 함께 두 개의 구성 요소를 감싸, 당신은 당신의 jQuery를 바로 인접한 설명 DIV를 선택해야합니다.

$(document).ready(function(){ 
    $(".entry a").click(function() { 
    $(this).parents('.entry').find('.description').slideToggle(1000); 
    }); 
});

은 적절한 HTML 양식에없는 경우 데이터베이스에서 에코의에 htmlentities()을 사용해야합니다.

출처

2010-11-23 00:17:41 Orbling

@Orbling : 당신의 솔루션은 매력처럼 작동했습니다! 내가해야만하는 것은 ".description {display : none;}"과 "entry {margin : 0; padding : 0px;}"를위한 두 개의 CSS 클래스를 만드는 것이다. – Chris

this.parentS()는 루트 요소를 선택하지 않으므로 더 나은 제품군입니까? 아래의 또 다른 게시물은 this.parent()를 사용하는 것이 좋습니다. 누군가 설명해 주시겠습니까? – Chris

'.parent()가''.parents (선택) 동안 요소의 바로 위 부모를 가져옵니다'특정 선택 일치하는 모든 부모를 가져옵니다. '.closest (selector)'를 사용하면'.parents()'와 같은 기능을하지만 모든 일치와는 반대로 첫 번째 조상만을 선택합니다. 내가 설정 한 방법은 HTML 구조가 여전히 기능을 유지하면서 약간 변경 될 수 있습니다 - '엔트리'클래스 안의 앵커가 슬라이드 될 수있는 '설명'클래스가있는 요소라고 가정합니다. – Orbling

네, 당신은 전환 후입니다. 어쩌면 일반 div가 아닌 원하는 div를 선택하기 위해 ID를 사용할 수 있습니다.

$(".link_class").click(function(){ $("#my_div").slideToggle(1000);    });

특정 링크를 클래스로 지정하여 대상을 지정하십시오.

출처

2010-11-23 00:19:32

모두 대신 div 만 접기/펼치기?

답변

관련 문제