Question

我已经完成了可扩展的部分工作，但是我试图找出是否有方法让我的更多...阅读更多......＆＃34 ;链接在点击后消失。我从这里获得了大部分代码和故障排除（StackOverflow），但我无法找到让它消失的方法。

代码如下：

<p style="text-align: center; font-size:18px; font face=nerislight; color:#009cdc">Test title test title test title</p>

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"} else {
e.style.display="none"}
return false;
}
</script>

Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy </p>

<p style="text-align: center; font-size:14px; font face=nerislight"><a style="cursor:pointer;" onclick="return toggleMe('landworks')">Read more...</a>

<div id="landworks" style="display:none;">Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion </p>

<strong>More Expansion</strong>Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion </p>

<p style="text-align: center;">Call to Action</p>

<div class="mk-button-align center"><a href="http://atestpage.com" id="123" class="mk-button dark button-190 light-color  mk-shortcode three-dimension small  ">Contact us today!</a></div>

<style type="text/css">
.button-190 {
            margin-bottom: 0px;
            margin-top: 0px;

    }

    .button-190 {
            background-color:#009cdc;

    }

     .button-190:hover {
            background-color:#0091cd;

    }
    .button-190.three-dimension  {
         box-shadow: 0px 3px 0px 0px #007db0;
    }
    .button-190.three-dimension:active  {
         box-shadow: 0px 1px 0px 0px #007db0;
    } 
</style>
</div>

基本上，我想要它，以便如果有人点击＆＃34;阅读更多...＆＃34;它只是消失了，看起来像普通的副本。正如它现在所做的那样，点击＆＃34;阅读更多＆＃34;它仍在页面上，在文本中创建了一个奇怪的中断。任何人都可以帮忙??

PS：我很乐意把它放在JSFiddle中，但是我不知道怎么做。新手javascript ...

Answer 1

这段代码应该是这样的： https://jsfiddle.net/maxim_mazurok/76kjpy27/

<p style="text-align: center; font-size:18px; font face=nerislight; color:#009cdc">Test title test title test title</p>

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
var rm = document.getElementById('read-more');
rm.style.display="none";
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"} else {
e.style.display="none"}
return false;
}
</script>

Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy Test copy </p>

<p style="text-align: center; font-size:14px; font face=nerislight"><a id="read-more" style="cursor:pointer;" onclick="return toggleMe('landworks')">Read more...</a>

<div id="landworks" style="display:none;">Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion </p>

<strong>More Expansion</strong>Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion Expansion </p>

<p style="text-align: center;">Call to Action</p>

<div class="mk-button-align center"><a href="http://atestpage.com" id="123" class="mk-button dark button-190 light-color  mk-shortcode three-dimension small  ">Contact us today!</a></div>

<style type="text/css">
.button-190 {
            margin-bottom: 0px;
            margin-top: 0px;

    }

    .button-190 {
            background-color:#009cdc;

    }

     .button-190:hover {
            background-color:#0091cd;

    }
    .button-190.three-dimension  {
         box-shadow: 0px 3px 0px 0px #007db0;
    }
    .button-190.three-dimension:active  {
         box-shadow: 0px 1px 0px 0px #007db0;
    } 
</style>
</div>

Answer 2

隐藏＆＃34;了解更多＆＃34;处理toggleMe函数前的段落：

onclick="this.style.display='none';return toggleMe('landworks')"

您可以在此jsfiddle中看到它与您的代码一起使用：http://jsfiddle.net/p8v9qpdL/

Answer 3

我制作了一个非常简单的版本，因此隔离问题会更容易。

它的作用是听取一个点击，然后改变文章的高度（其中包含其他所有内容）并使按钮消失。

样式是溢出的：隐藏的（隐藏在这种情况下溢出高度的东西）和静态高度。

read_more.addEventListener('click', function () {
    main.style.height = 'auto';
    read_more.style.display = 'none';
});

http://jsfiddle.net/snlacks/5f2qpx04/

Answer 4

将put和id放在内容div上的元素和相应的id上，并在id上添加标准化后缀。将这些ID的前缀传递到您的toggle_me函数，并同时更改链接和内容的可见性：

<a id='landmark-read-more' onclick='return toggle_me("landmark")'>Read more...</a>
<div id='landmark-content'>Content</div>
<script type="text/javascript">
function toggleMe(a){
  var contentDiv=document.getElementById(a+'-content');
  var toggleLink=document.getElementById(a+'-toggle');
  if(!contentDiv)return true;
  if(contentDiv.style.display=="none"){
    contentDiv.style.display="block";
    toggleLink.style.display="none";
  } else {
    contentDiv.style.display="none";
    toggleLink.style.display="block";
  }
  return false;
}

</script>

顺便说一句：用户没有链接来展开扩展，因此切换功能现在没有真正需要将显示设置为无。

Answer 5

我为我们的网站（live example）使用类似的div扩展。我没有在实时版本中隐藏可点击文本，但我刚刚将其添加到我的jQuery中并隐藏了目标类：

        $('.yourClassHere').toggle();

这是一个使用它的fiddle加上一些简化的扩展区域。

javascript中的可扩展div

5 个答案: