답변 수정 삭제 이부분을
본문
수고 하십니다.
코멘트에서 답변이나 글 수정을 하려고 하면
... 버튼을 눌러야 해당 메뉴가 노출 되는데요.
답변 수정 삭제 버튼이 미리 나와 이겠게 하려면 어떻게 해야 할까요?
답변 ㅣ 수정 ㅣ 삭제
가로로 정렬 되어 나오게 하고 싶습니다.
.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}
<?php if($is_comment_reply_edit){ ?>
<div class="bo_vl_opt">
<button type="button" class="btn_cm_opt btn_b01 btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
<ul class="bo_vc_act">
<?php if ($list[$i]['is_reply']) { ?><li><a href="<?php echo $c_reply_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'c'); return false;">답변</a></li><?php } ?>
<?php if ($list[$i]['is_edit']) { ?><li><a href="<?php echo $c_edit_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'cu'); return false;">수정</a></li><?php } ?>
<?php if ($list[$i]['is_del']) { ?><li><a href="<?php echo $list[$i]['del_link']; ?>" onclick="return comment_delete();">삭제</a></li><?php } ?>
</ul>
</div>
<?php } ?>
<script>
$(function() {
// 댓글 옵션창 열기
$(".btn_cm_opt").on("click", function(){
$(this).parent("div").children(".bo_vc_act").show();
});
// 댓글 옵션창 닫기
$(document).mouseup(function (e){
var container = $(".bo_vc_act");
if( container.has(e.target).length === 0)
container.hide();
});
});
</script>
감사합니다.
답변 2
1. 스크립트를 제거 해주세요
<script>
$(function() {
// 댓글 옵션창 열기
$(".btn_cm_opt").on("click", function(){
$(this).parent("div").children(".bo_vc_act").show();
});
// 댓글 옵션창 닫기
$(document).mouseup(function (e){
var container = $(".bo_vc_act");
if( container.has(e.target).length === 0)
container.hide();
});
});
</script>
2. 버튼을 제거 해주세요
<button type="button" class="btn_cm_opt btn_b01 btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">댓글 옵션</span></button>
3. style.css 파일을 해당 부분만 수정 해주세요
.bo_vc_act {
display: none;
position: static;
width: auto;
text-align: right;
border: 1px solid #b8bfc4;
margin: 0;
list-style: none;
background: #fff;
zoom: 1;
z-index: 9999;
padding: 0;
/* flex 적용 */
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
}
.bo_vc_act:before,
.bo_vc_act:after {
display: none;
}
.bo_vc_act li {
border-bottom: none;
border-right: 1px solid #f0f0f0;
}
.bo_vc_act li:last-child {
border-right: 0;
}
.bo_vc_act li a {
display: inline-block;
padding: 10px 15px;
}
.bo_vc_act li a:hover {
color: #3a8afd;
}
css는 자유롭게 꾸미시면 되겠습니다.
덕분에 잘 해결하였습니다.
감사합니다.
.bo_vc_act {display:block;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act li {float:left;border-bottom:1px solid #f0f0f0}
이렇게 해보세요
답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
