jQuery一键打开所有div

Question

Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link.

jQuery

$(document).ready(function () {
    $("input:button[name='uploadboy']").click(function () {
        $(this).parent().children('.uploadboy').slideToggle(200, 'swing');
    });
});

HTML

<div style="overflow:auto;" class="links-box ">
    <p style="float:left; width:250px;" id="links">
        <input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none;  color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
    </p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
    <p>content</p>
</div>
<div style="overflow:auto;" class="links-box ">
    <p style="float:left; width:250px;" id="links">
        <input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none;  color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
    </p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
    <p>content</p>
</div>

example in jsFiddle

Answer 1

As I mentioned in my comment above, IDs must be unique. That said, try this:

$("input").click(function () {
    $(this).slideToggle(200, 'swing');
});

jsFiddle example

Answer 2

Use the below script, .find method only searches for the descendants ( http://api.jquery.com/find/ ).

$(document).ready(function () {
    $("input:button[name='uploadboy']").click(function () {
        $(this).parent().parent().next('.uploadboy').slideToggle(200, 'swing');
    });
});

Answer 3

What I initially see here that's an issue is that you have 2 input buttons with the same id. While this may not be the overall issue, you still can't have 2 elements with the same id. I also am not sure if this is just generic code you cleaned to ask a question, but your selectors seem pretty complicated. You attach the .click event to both input buttons, then you go to the buttons parent, which is the paragraph, then you go the child object which is the button. You are essentially going from point one spot, up a level, then back down a level. When the click handler is attached to the button, anytime you click a button, you can reference $(this) to refer to the button.

<input type="button" name="uploadboy" id="button1" />
<input type="button" name="uploadboy" id="button2" />

$(document).ready(function(){
    $("input:button[name='uploadboy']").click(function () {
        $(this).SlideToggle(200, 'swing');
    });
});

If you look at the function that is ran when the input button is clicked, it simply refers to the $(this) object. This is a benefit of jquery and $(this) is the specific button that you clicked. Even if there are 20 buttons on the page, whatever button is clicked will be this. So in the above example, the button clicked will have the slide toggle occur. You could also navigate the dom off of this if you need to move around like before.