添加额外的div到dom jquery（toogle点击更多功能） [英] add extra divs to the dom jquery ( toogle click more function)

问题描述

这是我在这个网站上的第一篇文章，我只是想知道是否有人可以帮助我解决已经持续一周的问题，我对javascript知之甚少，但我会尝试将此问题解释为尽我所能。

例如，当您在第1列和第2列中按更多时，您会看到
右侧列下的间隙。这是我需要
来填补额外div的差距。

用额外的东西填补空白会很棒divs（分开
列像一个报价或图像，但课程具有相同的功能），现在我看了>教程基于
添加元素到DOM jquery但我只是没有得到它:(阅读它并
阅读它仍然不理解它。这里是带
函数的列，一旦按下More

图像显示额外隐藏的div同时出现在扩展列的
下这填补了差距，使另一列
没有延长甚至

JSFiddle

差距图片

click_toggle.js

  clickMenu = function（menu，element，cname）{
 var getEls = document.getElementById（menu）.getElementsByTagName（element）; $（变量i = 0; i< getEls.length; i ++）{
 getEls [i] .onclick = function（）{
 if（（this.className。如果（（this.className.indexOf（'click'））！=  -  1）{
 this.className = this.className（））= 1）
 {
 if .replace（click，）;; 
} 
 else {
 this.className + =click; 
} 
} 
} 
} 
} 
  

more.css：

  .cf：before，
 .cf：after {
内容：; 
 display：table; 
} 
 
 .cf：after {
 clear：both; 
} 
 / *浮点类* / 
 .f_right {float：right; } 
 .f_left {float：left; } 
 
 
 
 / *始终可见* / 
 #outer .holder {padding：1em; border：1px solid #ddd; margin：0 20px 10px 0;} 
 #outer .holder p {padding：5px 0 0 0; margin：0;} 
 #outer .holder p.bold {font-weight：bold;} 
 #outer .holder h2 {margin：0; padding：0;} 
 
 / * unlicked style div.more * / 
 #outer div.more i {float：right; margin-right：-10px 10px 0 0;光标：指针;颜色：＃C00; font-weight：bold;} 
 #outer div.more i.hide {display：none;} 
 #outer div.more p {display：none;} 
 #outer div.more img {display：none;} 
 
 / *点击风格div.click * / 
 #outer div.click i.show {display：none;} 
 #outer div。点击i.hide {display：block;} 
 #outer div.click p {display：block;} 
 #outer div.click img {display：block;向左飘浮; padding-right：10px;} 
  

解决方案

您的标记/代码有点难以遵循。下面是我如何去做：

JSFiddle

我使用JQuery使代码更容易处理，并使用一些更简单的标记来阐明示例。请注意，因为我在JQuery中使用了parent / find方法，并且给出了所有类，所以很容易有多个框，每个框都可以独立工作。

你可以放置你想要显示和隐藏在extraContentdiv中的任何内容 - 在我的例子中我放了一些标题，段落和图像，但这可以是任何东西。

Javascript：

  $（function（）{
 
 $（。toggleLink） .on（click，function（）{
 // $（this）将被点击的more/less链接
 //找到它的父项，然后在里面 - 选择额外内容
 //并切换其可见性
 var extraContentBox = $（this）.parent（）。find（。extraContent）; 
 extraContentBox.toggle（） ; 
 
 //根据新的可见性更新切换链接的文本
 //额外内容div 
 var linkText =（extraContentBox.is（'：可见'））？少：多; 
 $（t他）.parent（）找到（ toggleLink。）文本（LINKTEXT）。 
}）; 
 
}）; 
  

更新：

我认为你需要尝试让它看起来正确。以下是您可能需要的一些基本内容：

要隐藏元素，请先添加display：none;到CSS，或者像这样的样式标签：

 < div style =display：none;>< ; / DIV> 
  

要使用JQuery选择元素，请使用 #id 或 .class ，例如：

  $（＃someElementID ）。显示（）; 
 $（。someClass）。hide（）; 
  

使用ID为特定元素提供一个名称（在页面上必须是唯一的）。将类用于多次使用的事物。

单击元素时执行某些操作：

  $（ #someElement）。on（click，function（）{
 // code here 
}）; 
  

确定一个元素是否可见：

  var isVisible = $（＃someElement）。is（：visible）; 
 if（isVisible）{
 //做点什么
} 
  

获取元素的高度：

  var height = $（＃someElement）。height（）; 
  

设置元素的高度：

  $（ ＃someElement）高度（100）。 
  

this is my first post in this website and I just wonder if someone can help me with a problem that has been going on for a week now, I dont know much on javascript, but I'll try to explain the problem as much as I can.

For example when you press ''more'' in column 1 and 2 you will see a gap under the columns on the right side.Those are the gaps I need to fill with extra divs.

It would be great to fill the gaps with extras divs (separately from the columns like a quote or image but ofcourse with the same function), now I looked at >tutorials based on "adding element to DOM jquery" but I just didnt get it :( read it and read it and still dont understand it. here are the columns with the function and you'll see the gaps once you press "More"

the images show the extra hidden div appearing at the same time next to the column extended that fills the gap to make the other column that hasnt been extended even

JSFiddle

picture of the gaps

click_toggle.js

clickMenu = function(menu,element,cname) {
    var getEls = document.getElementById(menu).getElementsByTagName(element);

    for (var i=0; i<getEls.length; i++) {
            getEls[i].onclick=function() {
            if ((this.className.indexOf(cname))!=-1)
            {
            if ((this.className.indexOf('click'))!=-1) {
                this.className=this.className.replace("click", "");;
                }
                else {
                this.className+=" click";
                }
            }
        }
    }
}

more.css:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
/* Float classes */
.f_right { float: right; }
.f_left { float: left; }



/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}

/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}

/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}

解决方案

Your markup / code is a bit hard to follow. Here's how I'd go about it:

JSFiddle

I've used JQuery to make the code a bit easier to work with and used some simpler markup to clarify the example. Note that because I've used the parent/find methods in JQuery, and given everything classes, it's easy to have more than one box and each will work independently.

You can put whatever content you want to be shown and hidden inside the "extraContent" divs - in my example I've put some headers, paragraphs and an image but this can be anything.

Javascript:

$(function() {

$(".toggleLink").on("click", function() {
    // $(this) will be the "more" / "less" link that was clicked.
    // Find its parent, then inside that - select the "extra content"
    // box and toggle its visibility
    var extraContentBox = $(this).parent().find(".extraContent");
    extraContentBox.toggle();

    // Update the text of the toggle link based on the new visiblility
    // of the "extra content" div
    var linkText = (extraContentBox.is(':visible')) ? "less" : "more";
    $(this).parent().find(".toggleLink").text(linkText);
});

});

UPDATE:

I think you'll need to experiment to get it to look right. Here are a few basic things you might need:

To hide an element initially add "display: none;" to the CSS, or in a style tag like this:

<div style="display: none;"></div>

To select an element with JQuery, use #id or .class, e.g.:

$("#someElementID").show();
$(".someClass").hide();

Use an ID to give a specific element a name (must be unique on the page). Use classes for things that are used more than once.

To do something when an element is clicked:

$("#someElement").on("click", function() {
    // code here
});

To determine if an element is visible:

var isVisible = $("#someElement").is(":visible");
if (isVisible) { 
    // do something
}

To get the height of an element:

var height = $("#someElement").height();

To set the height of an element:

$("#someElement").height(100);

这篇关于添加额外的div到dom jquery（toogle点击更多功能）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！