드롭 메뉴 표시가 뜻대로 안됩니다.

타버린나무 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.02.13 23:36:30 조회 1931 (211.♡.♡.115)

본문


   <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 $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>

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

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

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

어딜 손봐야할까요...

#php

답변 1

아긔아자 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-02-14 00:07:34 182.♡.♡.183

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

제가 생각하는게 맞다면


$rank_name = $row['mb_nick'];

이 부분 밑에


$rank_id = $row['mb_id'];

이걸 추가 해주시고.


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

이렇게 수정 해주세요.


$rank_id = $row['mb_id'];

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

↳ 타버린나무 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-02-14 01:10:18211.♡.♡.115


<?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>

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

풀 소스입니다.

말씀해주신대로 한것과 같은데 마찮가지 현상입니다. ㅜㅜ;

↳ 아긔아자 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-02-14 08:23:07182.♡.♡.183



<?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>

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


<?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 = '';
    }
?>

이렇게하시면 0포인트 이상 랭킹 나옵니다.

↳ 타버린나무 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-02-14 08:45:21211.♡.♡.115

제가 어휘력이 딸려서 질문 전달이 잘못됐나보네요.

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


  <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 안에서는 저 $rank_id 값이 항상 한가지 같은 값만 나온다는 소리죠..

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

↳ 아긔아자 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-02-14 09:24:12182.♡.♡.183



<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 } ?>

아하 네네 이제 이해했습니다. 이대로 해보세요. 저는 그냥 빠르게 만든다고 "myFunction" 부분을 for 문 돌렸는대 자바스크립트로 for 문돌리셔서 만드시면 됩니다.

↳ 타버린나무 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022-02-14 18:03:41211.♡.♡.115

감사합니다. 잘 동작합니다.
ps. 이전에 댓글 삭제했습니다. 술한잔 했더니 오버했습니다. 죄송합니다.

답변을 작성하시기 전에 로그인 해주세요.

드롭 메뉴 표시가 뜻대로 안됩니다.

QA