테스트 사이트 - 개발 중인 베타 버전입니다

드롭 메뉴 표시가 뜻대로 안됩니다. 채택완료

타버린나무 3년 전 조회 1,957

</p>

<p>   <li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>

<div class="dropdown">

  <a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a></p>

<p><?php echo $row['mb_id']?> <!-- 여기서는 아이디가 차례대로 제대로 나옵니다. -->

  <div id="myDropdown" class="dropdown-content">

    <a href="/g5/bbs/profile.php?mb_id=<?=$row['mb_id']?>">자기소개</a>  <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->

    <a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$row['mb_id']?>">쪽지보내기</a>

  </div>

</div>

    </td></tr></table>

    <span class="rank_point"><?php echo $point; ?></span></li></p>

<p>

<script>

/* When the user clicks on the button, 

toggle between hiding and showing the dropdown content */

function myFunction() {

  document.getElementById("myDropdown").classList.toggle("show");

}</p>

<p>// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

</script></p>

<p>

 

포인트 랭킹 목록을 표시하고 이름 클릭하면 드롭메뉴가 나오게 하려고 위 소스를 사용했습니다.

문제는 드롭메뉴는 나오지만 어느 곳에서 건 간에  첫번째 아이디만 나옵니다.

어딜 손봐야할까요...

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

답변 1개

채택된 답변
+20 포인트
아긔아자

아이디 부분에서 랭킹 첫번째만 나온다는 말씀이시죠?

 

제가 생각하는게 맞다면 

</b></p>

<p>$rank_name = $row['mb_nick'];</p>

<p><b>

이 부분 밑에 

</b>

$rank_id = $row['mb_id']; </p>

<p><b>

이걸 추가 해주시고.

</b></p>

<p>   <li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>

<div class="dropdown">

  <a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>

<?php echo $rank_id?> <!-- 여기서는 아이디가 차례대로 제대로 나옵니다. -->

  <div id="myDropdown" class="dropdown-content">

    <a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a>  <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->

    <a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>

  </div>

</div>

    </td></tr></table>

    <span class="rank_point"><?php echo $point; ?></span></li></p>

<p><script>

/* When the user clicks on the button, 

toggle between hiding and showing the dropdown content */

function myFunction() {

  document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

</script></p>

<p><b>

이렇게 수정 해주세요. 

</b>

$rank_id = $row['mb_id']; </p>

<p><b>

은 for 문 안에 있어야 합니다. 그래야지 회원을 조회해서 랭킹 순서대로 출력해요

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

답변에 대한 댓글 5개

타버린나무
3년 전
[code]
<?php
include_once("./_common.php");
//include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>

<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>

<div class="pl_rank2">
<b>【 포인트 순위 TOP 10 】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = " and mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where mb_point > '{$row['mb_point']}' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id=$row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>

<style>
/*.dropbtn {
--background-color: #3498DB;
--color: white;
padding: 16px;
font-size: 1em;
border: none;
cursor: pointer;
}
*/

.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a>
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li>
<?php } ?>
</ul>

</div>
</div>
<?php //include_once(G5_THEME_MOBILE_PATH.'/tail.php'); ?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
[/code]

소스가 너무 길어서 제딴엔 질문과 상관있는 부분만 자른다는게 질문을 어렵게 했나보네요.

풀 소스입니다.

말씀해주신대로 한것과 같은데 마찮가지 현상입니다. ㅜㅜ;
아긔아자
3년 전
[code]

<?php
include_once("./_common.php");
//include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>

<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>

<div class="pl_rank2">
<b>【  포인트 순위 TOP 10  】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = "mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
    $rank = number_format($i + 1);
    //$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
    $rank_name = $row['mb_nick'];
    $rank_id=$row['mb_id'];
    $point = number_format($row['mb_point']);
    if ($rank == 1) {
        $rank_bg = ' rank_bg1';
    } else if ($rank == 2) {
        $rank_bg = ' rank_bg2';
    } else if ($rank == 3) {
        $rank_bg = ' rank_bg3';
    } else {
        $rank_bg = '';
    }
?>

<style>
/*.dropbtn {
  --background-color: #3498DB;
  --color: white;
  padding: 16px;
  font-size: 1em;
  border: none;
  cursor: pointer;
}
*/

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
    <li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
  <a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>
  <div id="myDropdown" class="dropdown-content">
    <a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a>
    <a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
  </div>
</div>
    </td></tr></table>
    <span class="rank_point"><?php echo $point; ?></span></li>
<?php } ?>
</ul>

</div>
</div>
<?php //include_once(G5_THEME_MOBILE_PATH.'/tail.php'); ?>
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
[/code]



이렇게 해보세요. 아마 포인트 부분에서 에러난걸껍니다. 만약에 포인트 0포인트 이상부터 하고싶으시면

[code]
<?php
$sql_common = " and mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where mb_point > '0' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id=$row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>
[/code]

이렇게하시면 0포인트 이상 랭킹 나옵니다.
타버린나무
3년 전
제가 어휘력이 딸려서 질문 전달이 잘못됐나보네요.

랭킹은 잘 표현되는데 아이디 클릭>드롭다운 메뉴 에서 드롭다운 메뉴에 소메뉴(자기소개)를 클릭하면 항상 같은 값이 나온다는 얘기입니다.

[code]
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a> <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
[/code]

이 div 안에서는 저 $rank_id 값이 항상 한가지 같은 값만 나온다는 소리죠..

저 드롭메뉴 창도 위치가 항상 첫번째 아이디에서 고정되있는데 관련이 있는거 같습니다.
아긔아자
3년 전
[code]

<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>
<style>
/*.dropbtn {
  --background-color: #3498DB;
  --color: white;
  padding: 16px;
  font-size: 1em;
  border: none;
  cursor: pointer;
}
*/

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<div class="pl_rank2">
<b>【  포인트 순위 TOP 10  】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = "mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
    $rank = number_format($i + 1);
    //$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
    $rank_name = $row['mb_nick'];
    $rank_id = $row['mb_id'];
    $point = number_format($row['mb_point']);
    if ($rank == 1) {
        $rank_bg = ' rank_bg1';
    } else if ($rank == 2) {
        $rank_bg = ' rank_bg2';
    } else if ($rank == 3) {
        $rank_bg = ' rank_bg3';
    } else {
        $rank_bg = '';
    }
?>


<li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
  <a onclick="myFunction<?php echo $i; ?>()" class="dropbtn"></span><?php echo $rank_name; ?></a>
  <div id="myDropdown<?php echo $i; ?>" class="dropdown-content">
    <a href="/g5/bbs/profile.php?mb_id=<?php echo $rank_id; ?>">자기소개</a>
    <a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?php echo $rank_id; ?>">쪽지보내기</a>
  </div>
</div>
    </td></tr></table>
    <span class="rank_point"><?php echo $point; ?></span></li>
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction<?php echo $i; ?>() {
  document.getElementById("myDropdown<?php echo $i; ?>").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
<?php } ?>

[/code]

아하 네네 이제 이해했습니다. 이대로 해보세요. 저는 그냥 빠르게 만든다고 "myFunction" 부분을 for 문 돌렸는대 자바스크립트로 for 문돌리셔서 만드시면 됩니다.
타버린나무
3년 전
감사합니다. 잘 동작합니다.
ps. 이전에 댓글 삭제했습니다. 술한잔 했더니 오버했습니다. 죄송합니다.

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

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

로그인