主页 / 问题 / 1094831
Accepted
hibinyru
Asked:2020-03-15 15:17:36 +0000 UTC2020-03-15 15:17:36 +0000 UTC

删除点击 js 的链接

  • 772

请帮我解决这个问题。有一个通过链接隐藏/打开文本的现成解决方案

var ns6 = document.getElementById && !document.all ? 1 : 0
var head = "display:''"
var folder = ''

function expandit(curobj) {
  folder = ns6 ? curobj.nextSibling.nextSibling.style : document.all[curobj.sourceIndex + 1].style
  if (folder.display == "none")
    folder.display = ""
  else
    folder.display = "none"
}
Текст виден <a href="javascript:void(0);" class=p onClick="expandit(this)">Показать полностью</a>
<span style="display:none">текст не виден</span>

并且有必要当您单击“完整显示”链接时，此链接会消失并显示整个文本。完全类比，就像在 VKontakte 中所做的那样

提前致谢 ：）

javascript

2 个回答

  1. Best Answer

    删除点击时的任何元素是这样的：

    let del = document.getElementById('js-self-delete');

del.addEventListener('click', function(){
    this.outerHTML = "";
  // del.outerHTML = "";
  // this.parentNode.removeChild(this);
  
  // this ссылается на объект, в контексте которого вызвана функция
  // (здесь это кликнутая кнопка)
});
    <button id="js-self-delete">Удали меня!</button>

    在你的情况下：

    function expandit(btn) {
  btn.nextElementSibling.style.display = "block";
  btn.outerHTML = "";
}
    Текст виден <a href="javascript:void(0);" class="p" onclick="expandit(this)">Показать полностью</a>
<span style="display: none;">какой-тоо текст...</span>

    但是onclick="..."一旦脚本开始做的只是隐藏一个按钮，它就会产生很多问题。因此，您最初应该习惯不使用它）

    document.addEventListener('click', function(e){
  if( !e.target.matches('.js-show-text') ) return;
  
  e.target.nextElementSibling.classList.remove('hidden');
  e.target.outerHTML = "";
});

// см. «Делегирование Событий»
    .hidden {
  display: none;
}
    Текст-1 <a class="js-show-text" href="javascript:void(0);">Показать полностью</a>
<span class="hidden">Скрытый-1</span>
<hr>
Текст-2 <a class="js-show-text" href="javascript:void(0);">Показать полностью</a>
<span class="hidden">Скрытый-2</span>

    Ps 如果按钮不多，CSS也可以：

    .hidden {
  display: none;
}

label {
  color: #045acf;
  text-decoration: underline;
  cursor: pointer;
}

.cb:checked ~ label { display: none; }
.cb:checked ~ div.hidden { display: block; }
    <div>
  <input id="cb-1" type="checkbox" class="hidden cb"> Текст-1
  <label for="cb-1">Показать полностью</label>
  <div class="hidden">Скрытый-1</div>
</div>

<hr>

<div>
  <input id="cb-2" type="checkbox" class="hidden cb"> Текст-2
  <label for="cb-2">Показать полностью</label>
  <div class="hidden">Скрытый-2</div>
</div>

    • 1 
  2. <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias porro enim, in. Minima ab sapiente, rerum cumque ea, possimus delectus.
</div>
<div class="more">Показать полностью</div>

<style>
    .text{
        width: 150px;
        height: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .more{
        cursor: pointer;
        color: blue;
    }
</style>

<script>
    $('.more').click(function() {
        $(this).fadeOut(0)
        $('.text').css({'height': 'auto', 'white-space': 'normal'})
    })
</script>
    • -1

相关问题